Question

如何让我的图像水平居中（如果可能的话也垂直居中）？

HTML

<div class="wholeHeight">
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>

CSS

.wholeHeight 
{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.ajustImageToScreenResolution 
{
    max-width: 100%;
    max-height: 100%;
}

jsFiddle：http://jsfiddle.net/0exjyfz5/

Answer 1

最好的出路是：

<div class="wholeHeight">
    <div class ="myImage">
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
        </div>
</div>

.wholeHeight {
  position: relative;
}
.myImage{

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, +50%);
}
.ajustImageToScreenResolution 
{

    max-width: 100%;
    max-height: 100%;
}

小提琴：http://jsfiddle.net/0exjyfz5/8/

Answer 2

请检查一下我在css上做了一些改动会帮助你

<div class="wholeHeight">
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div>

wholeHeight 
{
   text-align:center;  
}
.ajustImageToScreenResolution 
{
    max-width: 100%;
    max-height: 100%;
    display:inline-block;
}

Answer 3

要使图像垂直居中，请将图像放入div中，使div与图像的高度和宽度相同，并设置＆＃34; margin-left＆＃34;和＆＃34;保证金权利＆＃34;自动为div。这将使其垂直居中。

Answer 4

请添加以下代码。

<center><div class="wholeHeight">
    <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png" class="ajustImageToScreenResolution">
</div></center>

非常感谢。

将我的形象集中在我的div中

4 个答案: