居中形象

Question

我正在尝试水平居中图像。但是它不会从页面的左侧移动。 This answer在我的案例中不起作用。我做错了什么？

#container {                
        width: 100%;        
        border: 2px yellow dashed;
        height: 100px;
}

#profile-image img{
    margin-left: auto;
    margin-right: auto;
    border: 2px orange solid;
}

我的空间：

<div id="container">
            <div id="profile-image">
                <p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p>
            </div>

Answer 1

试试这个：http://jsfiddle.net/rua4d/2/

#container {                
    width: 300px;        
    border: 2px yellow dashed;
    height: 100px;
    display:table-cell;
    position:relative;
    vertical-align:middle;
}


#profile-image img{
    margin-left: auto;
    margin-right: auto;
    border: 2px orange solid;
    display:block;
    position:relative;
    vertical-align:middle;
    text-align:center;
    width:50px;
}

Answer 2

要使任何div或任何水平位于中心，常见的css方法将是，让我们有一个宽度并声明margin:0 auto;

#profile-image{
  width:400px;
  margin:0 auto;
}

Answer 3

您只需将

display:block

添加到图片的样式中即可。图像是内联元素，内联元素忽略边距。

Answer 4

为什么不能这样做？

#profile-image p { text-align: center; }
#profile-image img { display: inline; }

这样您就不需要指定宽度..如果您希望边距与text-align: center一起使用，则需要inline-block代替：

#profile-image p { text-align: center; }
#profile-image img { display: inline-block; }