php - 居中图像

Question

我正在尝试将图像水平居中。但是它不会从页面的左侧移动。这个答案在我的情况下不起作用。我究竟做错了什么？

#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

你只需要添加

显示：块

根据您的图像风格。图像是内联元素，内联元素忽略边距。

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