用于对齐多个 div 的正确 CSS

Question

好的，所以我正在尝试为我正在构建的多个网页构建一个主标题。在这个标题中，我有一个图像，图像下方的文本中心（全部在我的主标题的左侧），一个我希望在页面居中的主标题，以及两个链接（主页和联系我们），它将放置在主标题的右侧。这是我到目前为止的HTML和CSS：

<div class="header">
<div class="logoHeader">
<img src="6.jpg">
<p> My Image Header </p>
</div>
<h3> Page Header  </h3>
<a href=""> Home Page </a>
<a href=""> Contact Us </a>
</div>
div.logoHeader {
width: 125px;
}
.logoHeader img {
margin: auto;
display: block;
}
.logoHeader p {
margin: auto;
font-size: 70%;
text-align: center;
font-weight: bold;
}

这正确地将图像下方的文本居中，但现在我不知道如何将我的标题与页面中心对齐，链接到标题的右侧，然后最终将标题div 对齐到中心。当一切都说完了，我希望它看起来像这样：

     IMAGE                   
     Image            Main Header (centered within middle of img)       2 links  

（文本在图像下方居中）

所有这些都集中在我的窗户上。谁能帮我解决这个问题？任何帮助将不胜感激。

Answer 1

有很多方法可以做到这一点，但这里有一种方法。我将左侧（徽标和名称）和右侧（链接）浮动到相反的两侧，然后使用text-align:center和display:inline使页面标题居中

/* CSS */
.header {
    background:grey;
    display:inline-block;
    width:100%;
    text-align: center;
}
.logoHeader {
    width: 125px;
    float:left;
}
.pageHeader {
    display: inline;
    margin: 0 auto;
}
.headerLinks {
    float:right;
}
.logoHeader img {
    margin: auto;
    display: block;
}
.logoHeader p {
    margin: auto;
    font-size: 70%;
    text-align: center;
    font-weight: bold;
}
/* HTML (slightly changed) */
<div class="header">
    <div class="logoHeader">
        <img src="6.jpg" />
        <p>My Image Header</p>
    </div>
    <h3 class='pageHeader'>Page Header</h3>  
    <div class='headerLinks'>         
        <a href="">Home Page</a>
        <a href="">Contact Us</a>
    </div>
</div>

在这里演示

---

编辑

如果您也希望它垂直均匀分布并且不使用硬编码填充等，则可以将设置更改为使用表格格式。您必须使用每个部分的宽度，以便完全按照您想要的方式获得它。我正在使用与上面相同的 HTML

.header {
    background:grey;
    vertical-align:middle;
    width:100%;
    padding:15px;
    display:table
}
.header * {
    display:table-cell;
    width:33.3%; /* 100 / number of sections */
    vertical-align:middle;
}
.logoHeader img {
    margin: 0 auto;
}
.logoHeader p {
    display:block;
    margin:0 auto;
    font-size: 70%;
    text-align: center;
    font-weight: bold;
}
.pageHeader {
    text-align:center;
}
.headerLinks {
    text-align:center;
}

表格方法演示

对于像这样的东西，表格并不是一个糟糕的决定，但有些人建议永远不要使用表格进行布局，所以如果你愿意，你也可以使用 flexbox 的display:flex; justify-content:space-around