使用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時，圖像和文本不會垂直對齊

回答

相關問題