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>

Demo here

修改

如果您希望它在垂直方向上均匀分布并且不使用硬编码填充等，则可以更改设置以使用表格格式。你必须使用每个部分的宽度，以便按照你想要的方式获得它。我使用的是与上面相同的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; }

Demo of tabular approach

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

用于对齐多个div的正确CSS

1 个答案: