如何在 div 中居中 <img>？答案

【问题标题】：How do I center an <img> within a div?如何在 div 中居中 <img>？
【发布时间】：2013-10-04 20:48:35
【问题描述】：

我一直试图将此图像置于其 div 中的中心，但它一直向左对齐。

HTML

<div id="main">
   <div id="left">This is a test</div>
   <div id="right">
      <h2 id="fish">Fishtail</h2>
      <img height="150px" width="250px" src="image.jpg">
   </div>
</div>

CSS

#left, #right {
   width: 40%; 
   margin:5px; 
   padding: 1em;
   color:#51CBED;
   font-size:20px;
   padding:15px;
   background-color:white;
}
#left {
    float:left;
}
#right {
    float:right;
}
#fish  {
    text-align:center;
}
#main {
     height:800px;
     width:950px;
     background-color:black;
     opacity:.75;
     filter:alpha(opacity=75);
     margin-top:10px;
     margin-bottom:75px;
     padding:20px;
}

我尝试过使用margin: auto; 和align:middle;，但似乎都不起作用。

【问题讨论】：

标签： html css image center

【解决方案1】：

不需要相对/绝对定位。

解决此问题的简单方法是在图像上设置display:block。

jsFiddle demo - 完美运行。

CSS

#main #right img {
    margin: 0px auto;
    display: block;
}

【讨论】：

【解决方案2】：

试试这个：

HTML：

<div id="main">
        <div id="left">This is a test</div>
        <div id="right">
        <h2 id="fish">Fishtail</h2>
        <img height="150px" width="250px" src="image.jpg">
        </div>
</div>

CSS：

#left, #right {
   width: 40%; 
   margin:5px; 
   padding: 1em;
   color:#51CBED;
   font-size:20px;
   padding:15px;
   background-color:white;
}
#left {
    float:left;
}
#right {
    float:right;
    text-align:center;
}
#fish  {
    text-align:center;
}
#main {
     height:800px;
     width:950px;
     background-color:black;
     opacity:.75;
     filter:alpha(opacity=75);
     margin-top:10px;
     margin-bottom:75px;
     padding:20px;
}

Jsfiddle：http://jsfiddle.net/hdMEQ/

我基本上只是添加了 text-align: center; #right id 中的属性。

【讨论】：

【解决方案3】：

尝试添加：

#right img {
    margin:auto;  
    display:block;
}

JSfiddle

【讨论】：

【解决方案4】：

将为您提供具有可变宽度和高度或无需知道宽度和高度的死点。

设置相对于您希望图像居中的 div 的绝对位置

#main #right img {
    position:absolute;
    display: block;
    top:0;right:0;bottom:0;left:0;
    margin:auto;
} 
#right {
    position:relative;
}

【讨论】：

【解决方案5】：

<style type="text/css">
  .centerDiv {
    margin-right: auto;
    margin-left: auto;
    width: 80px;
  }
</style>

<div id="main">
     <div id="left">This is a test</div>
      <div id="right" class="centerDiv">
        <div class="centerDiv">
            <h2 id="fish">Fishtail</h2>
            <img height="80px" width="80px" src="http://www.w3schools.com/images/w3html.gif">
        </div>

      </div>
   </div>

</body>
</html>

【讨论】：