需要通过CSS在网页中居中放置图像

即使浏览器调整大小，我也希望将图像垂直和水平放置在页面中央。需要通过CSS在网页中居中放置图像

目前，我用这个CSS：

.centeredImage { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -150px; 
}

而这个HTML：

<img class="centeredImage" src="images/logo.png">

它中心的FF但不是IE（图像中心被放置在左上角）。有任何想法吗？

-Robot

来源

2010-03-23 Robot

你 “知道” 的形象的高度？ – Jage 2010-03-23 17:40:18

是的，虽然很显然额外的信用问题是如何对所有图像进行一般处理。 – Robot 2010-03-23 18:07:45

尝试使用这样的：

position: absolute

来源

2010-03-23 17:40:07 medium

这样做的伎俩......现在试图让它适用于动态调整图像宽度和高度的任何图像。 – Robot 2010-03-23 18:13:08

jquery将帮助你。 – Tesserex 2010-03-23 18:22:21

@Tesserex 从什么时候jQuery认为CSS？ – 2012-01-06 10:06:33

text-align:center; 

vertical-align:middle;

vertical-align

应招

来源

2010-03-23 17:39:05

请注意，文本对齐需要应用于容器，而不是图像。也垂直对齐不适合我，用IE7测试。 – Tesserex 2010-03-23 17:45:54

如果提供的答案不工作和/或不一致每个浏览器，你可能想给这个镜头：

http://andreaslagerkvist.com/jquery/center/

text-align:center;

应该得到它，虽然。

来源

2010-03-23 17:40:15 Kevin

这个jQuery插件看起来棒极了，尽管我使用的是ExtJS，所以我必须看看我是否可以翻译它。 – Robot 2010-03-23 18:14:58

啊，也许有一个等效的插件存在。不熟悉ExtJS。 – Kevin 2010-03-23 18:22:37

IE与position: fixed（以及其他一百万件事情）有问题，所以如果兼容性很重要，我会提出反对意见。

如果容器不必滚动，则使用position: absolute。否则，在滚动时，您需要一些js来调整图像的顶部和左侧。

text-align: center应该适用于图像的容器，但不适用于图像本身。但当然，这只能解决水平问题，而不是垂直问题。 vertical-align: middle不适用于我，即使有足够大的容器。

自动边距在IE中不起作用，至少当我测试它时。

来源

2010-03-23 17:42:57 Tesserex

职位：绝对工作......谢谢 – Robot 2010-03-23 18:12:05

明确：两者; margin：auto;

来源

2010-03-23 18:16:23 TheDudeAbides

解决方案：

.centeredImage { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     margin-top: image-height/2; 
     margin-left: image-width/2; 
    }

既然你提到：

margin-top: -50px; 
margin-left: -150px;

，如果它的正确对准中心，然后你的形象的高度将是50×100像素=; &宽度150x2 = 300px;

来源

2012-02-17 16:55:37

这是一个棘手的方式，但它的工作原理：

CSS：

html, body, #wrapper { 
    height:100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    border: 0; 
} 
#wrapper td { 
    vertical-align: middle; 
    text-align: center; 
}

HTML：

<html> 
<body> 
    <table id="wrapper"> 
     <tr> 
     <td><img src="my_cool_image.png" alt="hello world" /></td> 
     </tr> 
    </table> 
</body> 
</html>

来源

2012-03-20 04:51:03 JuanZe

我解决这样说：

img.class-name{ 

    position: absolute; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

来源

2013-05-24 08:04:34

适用于当前版本的Opera，Chrome，Firefox和Safari。 IE的任何人？ – Johan 2014-01-06 12:04:46

是的，也可以在IE 11中运行。 – Zymotik 2015-03-09 22:32:22

.image { 
    position: fixed; 
    margin: auto; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
}

来源

2014-05-23 12:50:55 user3668989

我做到了！这种方法坚如磐石，适用于所有主流浏览器。

style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"

我已经简单地使用了图像宽度的一半左边，然后使用边距对其进行分流。作品一个款待:)

来源

2014-06-24 09:33:52 mattfrombox

你有没有尝试过不同的窗口宽度 - 即响应？ – Ruskin 2014-06-24 09:52:25

有一个非常简单的，跨浏览器，自动调整大小的方法。拍摄宽度为200px的图像。就拿一半的宽度，然后执行以下操作：

#imgcent1 { 
    left: calc (100% - 100px/2); 
    /*rest of code*/ 
    }

确保有“空白”，以避免正数和负数（最好使用此约定所有操作数）。它会自动调整大小。只需尝试一下，希望在其他浏览器上进行测试将确保它成为预期的标准。

来源

2014-08-27 13:13:25 hograham

网络&响应上的单个图像

背景图像：

/image.png

CSS：

html, body { height: 100%; margin: 0px; } 

.bg-image { 
    width: 100%; 
    height: 100%; 
    background-image: url(image.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    background-size: contain; 
    text-indent: -9999px; 
}

HTML：

<body> 
    <div class="bg-image">Some text not displayed</div> 
</body>

来源

2015-04-04 10:32:18 Jordi

通用KISS（ “保持简单和愚蠢”）的方式：

<p style="text-align: center;"> <img src="myImage.png" /></p>

来源

2017-07-12 09:14:28 berhauz

需要通过CSS在网页中居中放置图像

回答

相关问题