Css 如何使父元素中的两个元素垂直居中？

正如您在演示中看到的，一旦我添加了

，

就会被替换

我希望

按钮

垂直居中于

页脚

演示：

HTML

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em></em>
    <button class="btn-primary">Reply</button>
</footer>

---

对HTML进行一个小的更改

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em>&nbsp;</em>
    <button class="btn-primary">Reply</button>
</footer>

回复
回复

在

中添加一些文本，它将按预期工作。（如果您不想在其中输入任何文本，只需在

中留出一个空格。）

---

对HTML进行一个小的更改

<footer>
    <button class="btn-primary">Reply</button>
</footer>

<footer>
    <em>&nbsp;</em>
    <button class="btn-primary">Reply</button>
</footer>

回复
回复

在

中添加一些文本，它将按预期工作。（如果您不想在其中输入任何文本，只需在

中留出一个空格。）

---

像这样请添加

float:left在
em
选择器中


CSS

footer {
    display: block;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    padding: 0 20px;
    text-align: right;
    margin-top: 20px;
}

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
}

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
    float:left;
}

像这样请添加
float:left在
em
选择器中


CSS

footer {
    display: block;
    height: 50px;
    line-height: 50px;
    border: 1px solid red;
    padding: 0 20px;
    text-align: right;
    margin-top: 20px;
}

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
}

em {
    display: inline-block;
    height: 50px;
    width: 50px;
    border: 1px solid blue;
    box-sizing: border-box;
    float:left;
}

您可以告诉他们的行为类似于表：。然后你的页脚可以像你喜欢的那样灵活，内容总是水平居中

<footer>
    <div><em>an em</em><button class="btn-primary">Reply</button></div>
</footer>

您可以告诉他们的行为类似于表：。然后你的页脚可以像你喜欢的那样灵活，内容总是水平居中

<footer>
    <div><em>an em</em><button class="btn-primary">Reply</button></div>
</footer>

只需将
vertical align:top
添加到
中，即可取消
显示：内联块
声明的默认行为。
您只需将
垂直对齐：顶部
添加到
即可取消
显示：内联块
声明的默认行为。
向左浮动将使长方体从右位置向左移动，我们不应尝试将元素推到另一侧。但我不希望它向左浮动。你的演示是我的原创。@SUNNY R GUPTA你检查我的演示为什么给我负点数我看到了你的演示，基本上它有一个小故障，你修改了原始代码的布局。我不想让它左对齐。左浮动将框从右位置移到左，我们不应该试图将一个元素推到另一边，但我不希望它向左浮动。你的演示是我的原创。@SUNNY R GUPTA你检查我的演示为什么给我负面印象我看到了你的演示，基本上它有一个小故障，你修改了原始代码的布局。我不想让它左对齐。你只添加空间。但在你的演示回复按钮没有得到垂直对齐工程为我。谢谢我想知道是否有办法用css添加空间。我不喜欢记着把
放在那里。你只需要增加空间。但在你的演示回复按钮没有得到垂直对齐工程为我。谢谢我想知道是否有办法用css添加空间。我不喜欢记着把
放进去。