如何在所有屏幕尺寸的网页上居中显示图像

con*_*r.p 29 html css text-align centering

我的HTML有问题.我在互联网上搜索过,但仍然没有真正的答案.

我有一个带有一些图像的网站,我希望它们位于中间.现在,在我的屏幕上,它们位于中间位置,但那是因为我把它们移到了一边.当我的朋友们看着它时,图像偏离中心.

这是网站 ; 如果你在13.5英寸的屏幕上,它看起来就在中间.

Tho*_*lds 76

尝试这样的事......

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
Run Code Online (Sandbox Code Playgroud)


Fre*_*nöw 31

仅仅使用一个简单的<center></center>标签是不可接受的?

如果没有,我必须在这里遗漏一些东西.随意在评论中解释原因.我喜欢网页设计,你的网站非常令人印象深刻.我可能会建议做一些事情来降低加载时​​间,这有点关闭.

- 从一个MC风扇到另一个:)

编辑

我刚刚看了你的代码......哎哟!

<center></center> 

<center><body onload="MM_preloadImages('../logo-glow.png')"> 
<a href="homepage.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('minecraft2','','../logo-glow.png',1)"><img src="../log-noglow.png" name="minecraft2" width="998" height="222" hspace="0" border="0" align="absmiddle" id="minecraft2" /></a></body></center> 
Run Code Online (Sandbox Code Playgroud)

尽量不要将格式标签放在身体外面.放置<center>身体标签的内部.它的工作原理是因为它遵循HTML的低级严格规则,但是,并非所有浏览器都很好,有些可能会错误地显示您的页面,除非此问题得到解决!

  • 肯定`<center>`有效,但它不是有效的HTML5 - 随着浏览器删除旧的,已弃用的标签,这将成为一个问题. (4认同)
  • 哦,没问题:)请注意从现在起6年后它可能**不再起作用的期望;) (2认同)

Dav*_*mas 9

在您的特定情况下,您可以将包含a元素设置为:

a {
    display: block;
    text-align: center;
}
Run Code Online (Sandbox Code Playgroud)

JS Bin演示.


小智 7

<div style='width:200px;margin:0 auto;> sometext or image tag</div>
Run Code Online (Sandbox Code Playgroud)

这是水平的