无法对齐标题（容器中的 div 中的 div）

Question

我无法对齐标题。我要： 它对我来说是这样显示的：

代码：

<div class="banner">

<div id="portfolio"><a href="portfolio.html">portfolio</a></div>

<div id="logo"><a href="index4.html"><img class="logo" src="images/mira-logo2.png" alt="mira-logo"></a></div>

 <div id="about"><a href="about.html">about</a></div>

</div>

</div>

CSS： ＃容器{ 边距：0 自动； 宽度：100%； 最小高度：100%； 位置：相对； }

#top {
text-align: center;
background-color:#FFF;
text-decoration: none; }

.banner {
margin-top: 14%;
width: 100%;
background-color:#000000;
height: 28px;
text-align: center;
position: absolute;
z-index: 1;
left: 0;
visibility: visible; }

/*Nav Links*/   

#portfolio {
text-align: center;
float: left;
font-family: helvetica, arial;
padding-top: 0.5%;
padding-left: 25%;
z-index: 2;
top: 0;
visibility: visible; }

#logo {
text-align: center;
position: fixed;
z-index: 2;
top: 0; }

img.logo {
padding-top: 0.8%;
width: auto;
max-height: 100%; }

#about {
text-align: center;
float: right;
padding-top: 0.5%;
font-family: helvetica, arial;
padding-right: 25%;
position: relative;
z-index: 2;
top: 0;
visibility: visible; }

Answer 1

您的#logo 是fixed。您需要手动告诉它位于页面的中心，方法是：

#logo {
    left: 50%;
    margin-left: -100px; /* 1/2 of the image width */
    position: fixed;
    z-index: 2;
    top: 0;
}