Невозможно выровнять заголовок (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: #container {margin: 0 auto; ширина: 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;
}