无法对齐标题（容器中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;
}