Question

我对CSS不太好。我得到了属性如何协同工作，但有时我得不到我想要的结果。我的页面顶部有一个横幅，其中包含徽标和一些文字。它们包含在一个较大的div标签中的单独div标签中，但是当我的图像垂直居中时，我的Text与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 vertical align不像大多数人期望的那样工作。在这种特殊情况下，它根本不会做任何事情。

您可能想要做的是使用bannerText元素上的填充来解决此问题。

例如，要在60px包装器中垂直居中20px文本：

#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表示左右填充。您可能需要根据横幅的设计进行调整。

此外，如果div中的唯一内容是文本并且未调整行高，则“height：20px”声明是多余的。我把它包括在内以提供一般解决方案。

Answer 2

#bannerText {
    line-height: 60px;
}

单向..

Answer 3

我会推荐一些与此类似的东西......

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;
}

您可以使用margin:调整CSS以使徽标图像垂直居中。

Answer 4

鉴于你的文字在div中，这可能有效：

#bannerText {
    vertical-align: middle;
}

有关您的选项的详情，请参阅this clear tutorial。

使用Div标签和CSS时，图像和文本不垂直对齐

4 个答案: