gpt4 book ai didi

html - 垂直居中图像和文本

转载 作者:行者123 更新时间:2023-11-28 17:28:32 26 4
gpt4 key购买 nike

我试图在所有浏览器中垂直居中放置一些文本,但由于某些特殊原因,我在这个特定案例中遇到了问题。有关示例,请参阅 fiddle 。我希望 Tester 这个词和图像一样垂直居中。感谢您的帮助。

http://jsfiddle.net/56jxjq69/2/

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

最佳答案

嗯,那里有很多东西。我确实删除了一些东西,我认为没有任何视觉影响。我结束了:

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

关于html - 垂直居中图像和文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26643428/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com