Question

Сам код такой:

#bt_vk{ width:58px; height:58px; background:url('/img/button/vk.png') 100% 100%; top left no-repeat; background-size: cover;   float:left;  vertical-align: middle;} 
#bt_ok{ width:58px; height:58px; background:url('/img/button/ok.png') 100% 100%; top left no-repeat; background-size: cover;  float:left; vertical-align: middle;} 
#bt_fb { width:58px; height:58px; background:url('/img/button/fb.png') 100% 100%; top left no-repeat; background-size: cover; float:left; vertical-align: middle;} 
#bt_ml{ width:58px; height:58px; background:url('/img/button/ml.png') 100% 100%; top left no-repeat; background-size: cover; float:left; vertical-align: middle;} 
#bt_mb{ width:58px; height:58px; background:url('/img/button/mb.png') 100% 100%; top left no-repeat; background-size: cover; float:left; vertical-align: middle;} 
#btn { width:100%;height:58px;
}
#btn div:first-child {
margin-left:0px;}

далее подключаем обработку этих стилей и заключаем в div:

<div id="btn">
<a href='ссылка'><div id="bt_vk"> </div></a>
<a href='ссылка><div id="bt_ok"> </div></a>
<a href='ссылка'><div id="bt_ok"> </div></a>
<a href='ссылка'><div id="bt_fb"> </div></a>
<a href='ссылка'><div id="bt_ml"> </div></a>
<a href='ссылка'><div id="bt_mb"> </div></a>
 </div>

Но преобразование происходит как и хотел в горизонтальной положении в одной строке, но не по центру. Как отцентрировать в данном случае?

 

Answer 1

Вот вводите людей в заблуждение. Тут не картинки надо выравнивать, а дивы. Придав дивам обтексание вы их не отцентрируете. Так не верстают. Сделайте через списки. Как-то так

Стили:

ul.social {padding: 0px; margin: 0px auto; width: 200px;}
ul.social li {display: inline; margin: 10px; list-style: none;}
ul.social li a {width:58px; height:58px; display: inline-block;}
ul.social li a#bt_vk {background:url('/img/button/vk.png') 100% 100%; top left no-repeat;}
ul.social li a#bt_ok {background:url('/img/button/ok.png') 100% 100%; top left no-repeat;}
и т.д.

html:

<div style="width: 100%">
   <ul class="social">
      <li><a href="" id="bt_vk"></a></li>
      <li><a href="" id="bt_ok"></a></li>
      и т.д.
   </ul>
</div>

 

Comments

спасибо, все теперь получилось)))