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 demo - 效果很好。

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

尝试添加：

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

JSfiddle

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

如何在div中居中<img/>？

5 个答案:

HTML：

CSS：