0
Кто-нибудь знает, как добиться вертикального центрирования также при повторной настройке окна браузера?HTML-центрирование
Горизонтальные работы прекрасно, а также размер изображения. Я хочу, чтобы оба изображения и ссылки были центрированы все время в середине браузера.
Кроме того, почему ul не является центром, а также изображен, но немного перемещен вправо?
HTML
<div id="container">
<div id="logo">
<img src="img/flaster_stiropor.png" width="800" alt="flaster" />
<ul>
<li><a href="#" target="_blank"><i class="fa fa-facebook-square fa-lg"></i></a>
</li>
<li><a href="#" target="_blank"><i class="fa fa-twitter-square fa-lg"></i></a>
</li>
<li><a href="#" target="_blank"><i class="fa fa-vimeo-square fa-lg"></i></a>
</li>
<li><a href="#"><i class="fa fa-envelope-square fa-lg"></i></a>
</li>
<li><i class="fa fa-download fa-lg"></i>
</li>
</ul>
</div>
</div>
CSS
body {
background: black;
color: white;
}
#container {
width:100%;
height:100%;
position:fixed;
left:0;
right:0;
z-index:100;
}
#logo {
text-align: center;
position:fixed;
width:80%;
z-index:101;
left:50%;
margin: 20% auto auto -40%;
}
img {
max-width: 100%;
height: auto;
width: auto\9;
/* ie8 */
}
#logo ul li {
display: inline;
list-style: none;
padding: 8px;
}
#logo ul li a {
color: white;
}
.fa-facebook-square:hover {
color: gray;
}
.fa-twitter-square:hover {
color: gray;
}
.fa-vimeo-square:hover {
color: gray;
}
.fa-envelope-square:hover {
color: gray;
}
.fa-download:hover {
color: gray;
}
ли вы попробовать использовать ваш любимый интернет-поиска для решения вертикального выравнивания в Div элементов? И, пожалуйста, не ожидайте, что мы прочитаем весь этот код, вместо этого сделаем его работающим как фрагмент или используйте http://jsfiddle.net – freefaller
@freefaller: Пожалуйста, не ожидайте, что мы [сделаем JSFiddle для вас] (http : //jsfiddle.net/516jufof/). Покажите, что JSFiddle вы пробовали до сих пор, и в какой части у вас конкретно возникают проблемы с ... – musefan
Erm, любая причина, по которой вы говорите мне @musefan вместо OP? – freefaller