如何在div中居图像

时间:2015-06-04 21:46:19

标签: html css center centering

如何让这些图像保持在中心位置?这是我的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;
}

4 个答案:

答案 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

&#13;
&#13;
#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;
&#13;
&#13;

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

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

最后,width: 150height: 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>