如何在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: 150
和 height: 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中居中图像?的主要内容,如果未能解决你的问题,请参考以下文章