0

好的，所以我正在尝试为我正在构建的多个网页构建一个主标题。在这个标题中，我有一个图像，图像下方的文本中心（全部在我的主标题的左侧），一个我想要在页面中居中的主标题，以及两个链接（主页和联系我们），它们将是放置在主标题的右侧。到目前为止，这是我的 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

（文字在图片下方居中）

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

4

1 回答 1

0

有很多方法可以做到这一点，但这里有一种方法。我将左侧（徽标和名称）和右侧（链接）浮动到相对的两侧，然后使用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;
}

表格方法演示

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

于 2013-11-13T22:06:50.297 回答