如何在同一行水平对齐内联块？

在同一行水平对齐内联块

问题

内联块比浮动元素具有优势，例如基线对齐和自动居中当视口变窄时。然而，在同一行上水平对齐两个内联块可能会带来挑战。

内联块对齐的挑战

• 浮动可能会干扰基线对齐并导致不必要的环绕.
• 相对和绝对定位可能会导致间距问题，类似于浮动。

解决方案：使用文本对齐

一种有效的解决方案涉及使用文本对齐: justify 技巧：

CSS 代码

.header {
    text-align: justify;
    background: #ccc;
}

.header:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 0;
    font-size: 0;
    line-height: 0;
}

h1 {
    display: inline-block;
    margin-top: 0.321em;
}

.nav {
    display: inline-block;
    vertical-align: baseline;
}

说明

• 将父元素的 text-align 设置为“justify”，以使文本在其宽度上均匀分布。
• 添加伪元素 header:after 来消耗 inline-blocks 之间的剩余空间。
• 设置 inline-blocks h1 和 .nav 显示：inline-block 和 Vertical-align ：维持基线的基线。

以上是如何在同一行水平对齐内联块？的详细内容。更多信息请关注PHP中文网其他相关文章！