css - 使用 Div 标签和 CSS 时图像和文本未垂直对齐

Question

我不太擅长 CSS。我知道这些属性是如何协同工作的，但有时我得不到我想要的结果。我的页面顶部有一个横幅，其中包含一个 Logo 和一些文本。它们包含在一个较大的 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 元素上填充来解决这个问题。

例如，要在 60 像素的包装器中垂直居中放置 20 像素的文本:

#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 */
}

注意，padding中的0指的是左右padding。您可能需要根据横幅的设计方式进行调整。

另外，如果div中只有文本且行高未调整，则“height: 20px”声明是多余的。我将其包括在内以提供通用解决方案。