2

我发现我的 tuts 关于水平和垂直居中图像。但它不起作用。我的代码是

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


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

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

4

6 回答 6

8

Write like this:

#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;
}

Check this http://tinkerbin.com/XYKUzvXu

UPDATED

Check this http://tinkerbin.com/GL4GaNfo

于 2012-07-06T10:05:24.440 回答
2

你应该有

text-align: center

在#parent 样式上水平对齐图像，如果我没记错的话，您也可以在父样式上设置它：

line-height: 400px;

这将垂直对齐图像。

于 2012-07-06T09:56:35.883 回答
1 
#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;
}
于 2012-07-06T09:57:24.363 回答
0

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/

于 2012-07-06T09:56:10.693 回答
0

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

于 2012-07-06T09:57:50.857 回答
0

您好，您可以通过 以下代码获得您想要的结果：display:table-cell; vertical-align:middle;-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;
}

see the demo :- http://tinkerbin.com/ajsaa856

于 2012-07-06T10:02:31.837 回答