Question

我试图在所有浏览器中垂直居中一些文本，并且由于某些特殊原因我遇到了问题。有关示例，请参阅小提琴。我希望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>

Answer 1

那里有很多东西。我认为，在没有任何视觉影响的情况下，我确实删除了一些内容。我最终得到了：

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

垂直居中图像和文本

1 个答案: