垂直居中圖像和文本

我想在所有瀏覽器中垂直居中某些文本，並且由於某些特定原因導致出現此問題。請看這個例子的小提琴。我希望Tester這個詞能夠垂直居中以及圖像。謝謝你的幫助。垂直居中圖像和文本

<div id="heading" style="margin: auto; display: block;"> 
<a href="http://www.sss.com"><img src="images/newlogo200x200.png" style="width: 50px; 
height: 50px; 
position: absolute; 
margin-left: 2.5%; 
margin-top: .5%;"/></a> 
<div id="header" style="margin: 0 auto; 
padding: 5px 0 0 0 !important; 
width: 100% !important; 
clear: both; 
background-color: black; 
color: white; 
vertical-align: middle; 
height: 70px;"> 

<span id="headtxt" style="font-family: ethno; 
max-height: 80px; 
font-size: 50px; 
width: 65%; 
padding: 0; 
display: block; 
margin: auto; 
line-height: 55px; vertical-align: middle;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; 
color: black;"> 
TESTER</span> 

</div></div>

來源

2014-10-30 Steven

我相信你可以在這裏找到答案： [http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div][1] [1]：http://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-div – N13Design 2014-10-30 01:59:13

那麼有很多東西在那裏。我認爲，沒有任何視覺影響，我確實刪除了一些東西。我結束了：

<div id="heading" style="margin: auto; display: block;"> 
    <div id="header" style="padding: 5px 0 0 0 !important;width: 100% !important;background-color: black;color: white;vertical-align: middle;height: 70px;"> 
    <div style="text-align:center;"> 
     <a href="http://www.sss.com"> 
     <img src="images/newlogo200x200.png" style="position:relative;top:8px;width: 50px;height: 50px;"/> 
     </a> 
     <span id="headtxt" style="font-family: ethno;font-size: 50px;text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;color: black;"> 
     TESTER 
     </span> 
    </div> 
    </div> 
</div>

看看fiddle。

來源

2014-10-30 01:55:11 ForguesR

垂直居中圖像和文本

回答

相關問題