如何在 div 中居中 <img>？

Posted 2023-03-05

【中文标题】如何在 div 中居中 <img>？

【英文标题】：How do I center an <img> within a div?

【发布时间】：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   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;，但似乎都不起作用。

【参考方案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   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   src="http://www.w3schools.com/images/w3html.gif">
        </div>

      </div>
   </div>

</body>
</html>