CSS 网格 - 我可以将内容水平右对齐，但垂直居中吗？

Question

我可以想出几种方法来解决这个问题，但我的问题是我是否缺少一种本机执行此操作的方法。

我的页面上有一个页脚。我想显示一些在页脚中右对齐的文本。但我也希望文本居中垂直对齐。

我的直接想法是向元素添加一些填充，但如果我决定稍后调整页脚的大小，那将破坏设计。还有一些其他 CSS 方法不使用本机 Flexgrid 选项。

另一个想法是将 div 放在 div 中（例如，任何元素），然后将第一个 align-content: center 第一个和 align-content: flex-end 内部的。哪个有效，但有点乱。

然而我想知道的是，我是否可以直接告诉 Flexgrid 将内容水平对齐到右侧并垂直居中？

Answer 1

有一个名为 Flexbox 的 CSS 功能：

Here is a tutorial

您的代码如下所示

.div-parent-element {

    display: flex; /* Make it flexbox */
    justify-content: flex-end; /* Align Right */
    align-items: center; /* Center Vertically */

}

.div-parent-element 是您的文本包含在

CSS 网格 - 我可以将内容水平右对齐，但垂直居中吗？

CSS Grid - Can I align content to the right horizontally, but centered vertically?

css

css-grid