Question

我发现了关于水平和垂直居中图像的问题。但它没有用。我的代码是

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

图像的高度和宽度是动态的。

Answer 1

像这样写：

#parent {
    position : relative;
    float : left;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align:center;
    line-height:400px;
}


#parent img {
    vertical-align:middle;
}

选中此http://tinkerbin.com/XYKUzvXu

<强>已更新

选中此http://tinkerbin.com/GL4GaNfo

Answer 2

你应该

text-align: center

在#parent样式上水平对齐图像，如果我记得正确，你也可以在父样式上设置它：

line-height: 400px;

这将垂直对齐图像。

Answer 3

#parent {
    position : relative;
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

Answer 4

语法错误nax-width : 700px;应为max-width : 700px;。任何方式都使用这个CSS，它会起作用，你的不会。

#parent
{
   position : relative;
    float : left;
    display: table-cell;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
    text-align: center;
    vertical-align: middle;
}
#parent img
{
    max-height :400px;
    max-width : 700px;
}

此处http://jsfiddle.net/ANwmv/

Answer 5

使用display:table-cell和vertical-align:middle以及text-align:center

<强> HTML

<div id="parent">
  <img src="http://s3.buysellads.com/1241308/100953-1333587587.jpg
"></div>

<强>的CSS

#parent {
    position : relative;
    display:table-cell;
  vertical-align:middle;
    width : 700px;
    height : 400px;
    overflow : hidden;
    background-color: black;
  text-align:center;
}


#parent img {
    max-height :400px;
    max-width : 700px;
}

现场演示

http://tinkerbin.com/RDZuJFS7

Answer 6

您好，您可以通过display:table-cell; vertical-align:middle;＆amp;获得所需的结果。 text-align:center; 见下面的代码： -

<强> HTML

 <div id="parent">
      <img src="http://dummy-images.com/abstract/dummy-107x160-RedDots.jpg" />
    </div>

<强> CSS

#parent {
    display:table-cell;
    width : 700px;
    height : 400px;
    background-color: black;
    vertical-align:middle;
    text-align:center;
}


#parent img {
    width : 107px;
    height : 160px;
}

请参阅演示： - http://tinkerbin.com/ajsaa856

将图像垂直和水平居中

6 个答案: