如何在div中居中放置图像

如何让这些图像保持居中？这是我的CSS和HTML代码。如何在div中居中放置图像

我的html代码：

<div id="logos"> 
    <div id="q"> 
    <img id="round" src="img/i1.jpg" /> 
    <img id="round" src="img/i1.jpg" /> 
    <img id="round" src="img/i1.jpg" /> 
    </div> 
</div>

我的CSS代码：

#logos { 
display: inline-block; 
width:100%; 
} 

#q{ 
display: block; 

} 
#round { 
border-radius: 50%; 
display: inline; 
margin: 0 5px; 
width: 150; 
height: 150; 
position: cetner; 
}

来源

2015-06-04 Soiks

'文本对齐：中心;' – Turnip

的可能重复的[CSS - HTML：在股利中心图像]（HTTP：/ /stackoverflow.com/questions/9980531/css-html-center-image-in-div） – ahoffner

快速提示：'id'应该每个元素都是唯一的。要为更多元素使用相同的标识符，请使用'class'。 –

使用text-align: center父...

#q{ 
 
    display: block; 
 
    text-align: center; 
 
} 
 

 
.round { 
 
    border-radius: 50%; 
 
    display: inline; 
 
    margin: 0 5px; 
 
    width: 150px; 
 
    height: 150px; 
 
}

<div id="logos"> 
 
    <div id="q"> 
 
     <img class="round" src="http://placehold.it/150x150" /> 
 
     <img class="round" src="http://placehold.it/150x150" /> 
 
     <img class="round" src="http://placehold.it/150x150" /> 
 
    </div> 
 
</div>

此外，ID必须是唯一的。 rounded应该是一个类，而不是一个ID。

其次，position: center;在CSS中不存在。

最后，width: 150和height: 150必须测量（可能px）的单位虽然这不会有任何影响，因为该元素是inline - 也许你的意思inline-block？

来源

2015-06-04 21:50:52 Turnip

你能帮我解释一下如何在每张图片上添加文字？ – Soiks

添加到#round CSS：

position: relative; 
display: block; 
margin: auto; 
width: 150px; /*units are needed */ 
height: 150px; /*units are needed */

来源

2015-06-04 21:50:25 dcardoso

守则

<div class="flex-align"> 
    <img class="round" src="http://placehold.it/150x150" /> 
    <img class="round" src="http://placehold.it/150x150" /> 
    <img class="round" src="http://placehold.it/150x150" /> 
</div>

的CSS

.flex-align { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

来源

2015-06-04 22:42:07 Sherizan

#image{ 
    text-align:center; 
} 

#image img{ 
    margin:0 auto; 
} 

<div class="image"> 
    <img src="path_to_your_image" alt=""> 
</div>

来源

2016-02-12 03:25:02

如何在div中居中放置图像

回答

相关问题