Вопрос по css, html, vertical-alignment – Как выровнять по вертикали два или более (рядом) элемента в div?

8

Я пытаюсь вертикально выровнять два элемента с разной высотой в div:

<div class="footer-icons">
    <div id="footer-twitter">
         <img src="images/twitter.png" width="40" alt="">    
    </div>
    <div id="footer-fb">
         <div class="fb-like" data-href="http://facebook.com/user" data-send="false" data-layout="button_count" data-width="160" data-show-faces="false" data-font="arial"></div>
    </div>
</div>

Div твиттера имеет высоту 40px, а div fb имеет высоту 20px. То, что в настоящее время происходит, это то, что div fb вертикально центрирован по нижнему краю изображения в твиттере. Вот CSS:

.footer-icons {
    padding-top:40px;
    width:300px;
    margin:auto;
    text-align:center;
    vertical-align:middle;
}

#footer-twitter {
    display:inline-block;
}

#footer-fb {
    display:inline-block;
}

Что я делаю неправильно?

И FB & amp; Элементы Twitter сдвигаются вниз на 40px верхним пределом родительского элемента. Nicodemeus

Ваш Ответ

2   ответа
20

Поместите вертикальное выравнивание на внутренние делители

#footer-twitter{
  display:inline-block;
  vertical-align:middle;
}

#footer-fb{
  display:inline-block;
  vertical-align:middle;
}
Кажется, работает. Благодарю. tariq
Обратите внимание, что это CSS3, и он не будет работать в старых браузерах.
Обратите внимание, что это не CSS3 иwill работать в старых браузерах, пока вы меняетеdiv элементы, которые будутspan элементы.
Если второй<div> достаточно долго, это закончится ниже изображения. Как мы могли остановить это?
1

Определитьline-height равно или больше, чем большая иконка:

.footer-icons {
    ...
    line-height: 32px;
}

Похожие вопросы