父容器div添加多子元素后位置偏移，如何实现水平对齐？

原始代码 #

CSS #

.titlebar {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
    display: inline-block;
    margin: 0;
    height: 125px;
    background-color: rgb(0, 0, 0);
    vertical-align: top;
}

.slogan {
    text-align: right;
    color: white;
    font-size: 20px;
    vertical-align: top;
    padding: 10px;
}

.assets {
    text-align: left;
    color: white;
    font-size: 20px;
    vertical-align: top;
    padding: 10px;
}

HTML #

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" type="text/css" href="default.css"> 
        </head>
        <div class="titlebar">
            <div class="assets">
                123
            </div>
            <div class="slogan">
                Hello
            </div>
        </div>
</html>

问题原因 #

div是块级元素，默认display:block，会独占父元素的整行宽度，因此.assets和.slogan会自动上下排列，你设置的vertical-align:top对块级元素无效，所以没法实现水平对齐。

解决方案 #

方案1：Flexbox布局（推荐，现代标准布局方式） #

修改父元素.titlebar的样式，启用Flexbox布局，直接控制子元素的排列方向和对齐方式：

.titlebar {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
    margin: 0;
    height: 125px;
    background-color: rgb(0, 0, 0);
    display: flex; /* 开启flex布局 */
    align-items: flex-start; /* 子元素顶部对齐，换成center可垂直居中 */
    justify-content: space-between; /* 子元素分别靠左右两端 */
}

.slogan {
    text-align: right;
    color: white;
    font-size: 20px;
    padding: 10px;
}

.assets {
    text-align: left;
    color: white;
    font-size: 20px;
    padding: 10px;
}

方案2：将子元素设为行内块元素 #

把.assets和.slogan改成display:inline-block，让它们可以在同一行显示，同时分配宽度避免超出父元素：

.titlebar {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
    display: block;
    margin: 0;
    height: 125px;
    background-color: rgb(0, 0, 0);
}

.slogan {
    text-align: right;
    color: white;
    font-size: 20px;
    padding: 10px;
    display: inline-block;
    width: calc(50% - 20px); /* 减去padding宽度，避免超出父元素 */
    vertical-align: top;
}

.assets {
    text-align: left;
    color: white;
    font-size: 20px;
    padding: 10px;
    display: inline-block;
    width: calc(50% - 20px);
    vertical-align: top;
}

方案3：浮动布局（不推荐，易引发清除浮动问题） #

给子元素设置浮动，同时父元素添加清除浮动的样式：

.titlebar {
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    width: 100%;
    display: block;
    margin: 0;
    height: 125px;
    background-color: rgb(0, 0, 0);
    overflow: hidden; /* 清除浮动，避免父元素高度塌陷 */
}

.slogan {
    text-align: right;
    color: white;
    font-size: 20px;
    padding: 10px;
    float: right;
}

.assets {
    text-align: left;
    color: white;
    font-size: 20px;
    padding: 10px;
    float: left;
}

内容的提问来源于stack exchange，提问作者user20482298