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

我对CSS并不擅长。我了解了这些属性如何协同工作，但有时候我没有得到我想要的结果。我的页面顶部有一个横幅，其中包含徽标和一些文字。它们包含在一个较大的div标签中的单独div标签中，但我的文本与div标签的顶部对齐，而图像垂直居中。我如何让中心垂直对齐？使用Div标签和CSS时，图像和文本不会垂直对齐

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

来源

2011-12-08 gsirianni

#bannerText { 
    line-height: 60px; 
}

是一种方式..

来源

2011-12-08 19:21:49 JayC

鉴于你的文字是一个div里面，这可能工作：

#bannerText { 
    vertical-align: middle; 
}

为见this clear tutorial更多关于你的选择的信息。

来源

2011-12-08 19:27:11

我有垂直对齐：中;并没有做任何事情。 – gsirianni

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

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

此外，如果div中的唯一内容是文本并且行高不调整，则“height：20px”声明是多余的。我将其列入提供一个通用解决方案。

来源

2011-12-08 19:57:21 pbaehr

我建议沿着这行的东西...

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:。

来源

2011-12-08 20:04:59 Tim

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

回答

相关问题