Форум Сайтостроение Веб-строительство

CSS

AM
На сайте с 10.01.2016
Offline
8
a_miller911
438

Подскажите пожалуйста, как выровнять картинку внутри блока по центру? 

<ul class="s-social">

<li class="s-social-item s-social-item-f">

<a class="lj-track" href="#" target="_blank" title="">

<img alt="Pic" class="mb24" src="images/2.jpg" />

</a>

</li>

</ul>

.s-social-item {

    display: inline-block;

    overflow: hidden;

    height: 30px;

    padding: 0;

    margin: 0 10px 0 0;

    background-color: #005673;

}

.s-social-item {

    width: 30px;

    border-radius: 2px;

}



.s-social-item-f:hover{background-color:#3B5998}.s-social-item {

    display: inline-block;

    overflow: hidden;

    height: 30px;

    padding: 0;

    margin: 0 10px 0 0;

    background-color: #005673;

}

.s-social-item {

    width: 30px;

    border-radius: 2px;

}

https://jsfiddle.net/6tLnxrcr/

Замшевая
На сайте с 09.02.2015
Offline
30
Замшевая
#1

https://jsfiddle.net/f29dek2j/

B
На сайте с 13.02.2008
Offline
262
borisd
#2

Добавьте в CSS: 

.s-social-item {

  text-align: center;  /* выравниваем по центру по горизонтали */

  line-height: 30px;  /* выравниваем по центру по вертикали */

}



/* чтобы работало нормально, задаем у картинки ширину и высоту */

.s-social-item img {

  width: 15px;

  height: 15px;

}
melkozaur
На сайте с 06.04.2010
Offline
505
melkozaur
#3

Подскажите, почему тема не называется "как выровнять картинку внутри блока по центру"?

Серверы в NL/US со скидкой 30% нашим читателям: E5-2650v4/10GB DDR4/240GB SSD/1 Gbps - от $20: https://ua-hosting.company/vps/nl SEO без компромиссов: https://seoleaks.net SEOLEAKS - продвижение сайтов: https://www.instagram.com/seoleaks

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий