css - 无法对齐标题(容器中的 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: ＃容器{ margin : 0 auto ； 宽度:100%； 最小高度:100%； position:relative；

#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;
}