Изображение и текст не выровнены по вертикали при использовании тегов Div и CSS

Question

Я не настолько хорош в CSS.Я понимаю, как работают свойства, но иногда я не получаю желаемых результатов.У меня есть баннер в верхней части моей страницы, который содержит логотип и текст.Они содержатся в отдельных тегах div в одном большем теге div, но мой текст выравнивается по верху тега div, а мое изображение центрируется по вертикали.Как выровнять центры по вертикали?

<div id="webBanner">
    <div id="bannerImage">
          <a href="Dashboard.aspx" title="Accreditation Data">
             <img src="Images/logo.png" />
          </a>
     </div>
     <div id="bannerText">
       Accreditation Database (AD)
     </div> 
</div>

CSS:

#webBanner
{
    height: 60px;
    width: 100%;
    vertical-align: top;
}

#bannerText
{
    font-family: Arial;
    font-size: xx-large;
    font-style: italic; 
    color: #fff;
    margin: 2px 5px;
}

#bannerImage
{
    height: inherit;
    float:left;
    width: 223px;
    vertical-align: middle;
    margin: 2px 5px;
}

Answer 1

CSS вертикальное выравнивание не работает так, как этого ожидает большинство людей.В данном конкретном случае он вообще ничего не сделает.

Что вы, вероятно, захотите сделать, - это решить эту проблему с помощью отступа для элемента bannerText.

Например, для вертикального центрирования текста размером 20 пикселейв оболочке 60px:

#webBanner {
    height: 60px;
    width: 100%;
}

#bannerText {
    font-size: 20px;
    height: 20px;
    padding: 20px 0;
    /* 20px padding on top and bottom plus 20px height = 60px total */
}

Обратите внимание, что 0 в отступе относится к левому и правому заполнению.Вы можете изменить это в зависимости от того, как разработан ваш баннер.

Кроме того, объявление «height: 20px» является избыточным, если единственным содержимым в div является текст, а высота строки не регулируется.Я включил его, чтобы обеспечить общее решение.

Answer 2

Я бы порекомендовал что-то вроде этого ...

HTML:

<div id="webBanner">
 <a id="bannerLink" href="Dashboard.aspx" title="Accreditation Data">
    <img src="Images/logo.png" />
 </a>
 <h1>Accreditation Database (AD)</h1>
</div>

CSS:

#webBanner
{
    height: 60px;
}

#webBanner h1
{
    color: #fff;
    float: left;
    font-family: Arial;
    font-style: italic; 
    line-height: 60px;
}

#bannerLink
{
    display: block;
    float: left;
    height: 60px;
    width: 223px;
}

Вы можете настроить CSS нацентрируйте логотип по вертикали, используя margin:.

Answer 3

#bannerText {
    line-height: 60px;
}

В одну сторону ..

Answer 4

Если ваш текст находится внутри div, это может сработать:

#bannerText {
    vertical-align: middle;
}

См. этот понятный учебник для получения дополнительной информации о ваших возможностях.