Центрирование изображения в горизонтальном меню навигации

Question

Центрирование изображения в горизонтальном меню навигации

0

Я пытаюсь центрировать изображение в середине моего меню навигации, а также стараюсь, чтобы все меню располагалось по центру вертикально посередине страницы.

Кроме того, каждый раз, когда я помещаюсь в изображение, текст идет на дно, а не выравнивается с вертикальным центром изображения.

Вот html:

<body>
      <div id="centered">
<ul>
    <li><a href="link1.html">LINK1</a></li>
    <li><a href="link2.html">LINK2</a></li>
    <li><img src="http://prettylushrecords.comoj.com/sampleimage.jpg"></li>
    <li><a href="link3.html">LINK3</a></li>
    <li><a href="link4.html">LINK4</a></li>
</ul>     
</div>
   </body>

Вот CSS:

html, body  { 
    background-color: white; 
    height: 100%; 
    margin: 0; 
    padding: 0;
    color: white; 
}

#centered { 
    border: none; 
    background: white; 
    height: 150px; 
    width: 100%;
    text-align: center;
    position: absolute; 
    top: 50%;
    margin-top: -75px;
}

#centered ul {
    list-style: none;
    margin-top: 58px;
    padding: 0;
} 

#centered li {
    display: inline-block;
    margin: 0 20px 0 20px;
    font-family: Courier, monospace;
    font-size: 15px;
    font-weight: bold;
}

#centered li a { 
    text-decoration: none; 
    color: #000;
    /*transition: color 0.2s linear;*/
}
#centered li a:hover {
    color: #bdb0b0;
    text-decoration: underline;
}

Вот демонстрация: http://jsfiddle.net/chassen2/n84ey/11/

user3054531 01 дек. 2013, в 19:55

Источник

Теги:

html

css

1 ответ

Ещё вопросы

Stefan Moraru · Answer 1 · 2013-12-01T17-43-00.000Z

Вы можете центрировать что-то в css, используя vertical-align: middle (вместе с display: table-cell).

<div style="display: table;">
    <div style="display: table-cell; vertical-align: middle;">
    </div>
</div>

ДЕМО: http://jsfiddle.net/RS78Y/

Может быть, это поможет вам.