如何让这些图像保持在中心位置?这是我的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;
}
答案 0 :(得分:0)
添加到#round css:
position: relative;
display: block;
margin: auto;
width: 150px; /*units are needed */
height: 150px; /*units are needed */
答案 1 :(得分:0)
在父...上使用text-align: center
#q{
display: block;
text-align: center;
}
.round {
border-radius: 50%;
display: inline;
margin: 0 5px;
width: 150px;
height: 150px;
}
&#13;
<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>
&#13;
此外,ID必须是唯一的。 rounded
应该是一个类而不是ID。
其次,position: center;
在CSS中不存在。
最后,width: 150
和height: 150
必须有一个度量单位(可能是px
),虽然这样做没有效果,因为元素是inline
- 也许你的意思inline-block
?
答案 2 :(得分:0)
守则
.flex-align {
display: flex;
align-items: center;
justify-content: center;
}
CSS
tr '[:upper:]' '[:lower:]' < input.gz > output.gz
答案 3 :(得分:0)
#image{
text-align:center;
}
#image img{
margin:0 auto;
}
<div class="image">
<img src="path_to_your_image" alt="">
</div>