html - 如何在 div 中居中？

Question

我一直试图将这个图像放在它的 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;但似乎都不起作用。

Answer 1

无需相对/绝对定位。

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

jsFiddle 演示- 它运行良好。

CSS

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

Answer 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 中的属性。

Answer 3

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

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

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

Answer 4

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

Answer 5

尝试添加：

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

JSfiddle