我试图将 float 图像置于我页面的中央,但我无法让它工作。这是我的代码
.imcontainer {
text-align:center;
display:inline-block;
}.float {
float: left;
font-size: small;
height: auto;
margin: 5px 7px 0 3px;
width: auto;
}
HTML
<div class="imcontainer">
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
<div class="float"><img width="70px" height="70px" src="image.jpg"></div>
</div>
我该如何解决这个问题?
最佳答案
您可以将容器居中并内联阻止子项以实现所需的布局。
.imcontainer {
text-align:center; /* center everything in the container */
}
.float { /* not really float any more so best to rename this */
display:inline-block; /* so the children on the same line */
font-size: small;
height: auto;
margin: 5px 7px 0 3px;
width: auto;
}
我肯定也会更正 HTML 以使其有效
<div class="imcontainer">
<div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
<div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
<div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
<div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
<div class="float"><img width="70" height="70" alt="" src="image.jpg"/></div>
</div>
关于css - 在 div 中居中 float 图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15950007/