本文介绍了尝试将一个居中的图像块向左对齐的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有多个图片,当网页调整大小应左对齐,但仍保持div块居中。他们目前正在集中:
I have multiple images that when the webpage is resized should be left justified but still keep the div block centered. They are currently all being centered:
请参阅下文:
这是我的HTML和CSS代码:
Here is my HTML and CSS code:
<div class="widget-content" style="text-align:center;">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
<img class="medium_thumb_rounded" id="15" src="my-img-src.jpg">
</div>
CSS:
.widget-content {
padding: 12px 15px;
border-bottom: 1px solid #cdcdcd;
}
.medium_thumb_rounded {
border: 1px solid #B6BCBF;
/*float: left;*/
height: 80px;
width: 80px;
margin-right: 1px;
margin-bottom: 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
任何想法我做错了什么?
Any idea what I'm doing wrong?
推荐答案
为了得到我想要的行为,你的DIV需要一个最大宽度。
To get the behavior I think you're seeking, your DIV needs a max-width.
style="text-align:center;"
向您的DIV添加:
margin:0 auto;
max-width:###px;
这篇关于尝试将一个居中的图像块向左对齐的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!