如何在div中居中图像?

Posted

技术标签:

【中文标题】如何在div中居中图像?【英文标题】:How to center images in div? 【发布时间】:2015-08-19 17:00:58 【问题描述】:

如何让这些图片居中?这是我的 css 和 html 代码。

我的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;

【问题讨论】:

text-align:center; CSS - HTML: center Image in Div的可能重复 快速说明:id 每个元素应该是唯一的。要对更多元素使用相同的标识符,请使用class 【参考方案1】:
#image
    text-align:center;


#image img
    margin:0 auto;


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

【讨论】:

【参考方案2】:

在父级上使用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: 150height: 150 必须有一个度量单位(可能是 px),尽管这不会产生影响,因为元素是 inline - 也许你的意思是 inline-block

【讨论】:

你能帮我解释一下如何在每张图片中添加下面的文字吗?【参考方案3】:

添加到#round css:

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

【讨论】:

【参考方案4】:

代码

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

【讨论】:

以上是关于如何在div中居中图像?的主要内容,如果未能解决你的问题,请参考以下文章

在 Div 中居中超大图像

如何在轮播中居中图像

如何在 Flexbox div 中居中文本标题

如何在 div 中居中 <img>?

如何在 HTML/CSS 中居中一组图像?

在 div 中居中浮动图像