浮动图像后，需要以div为中心 [英] After float images, need to be centered in div

问题描述

我尝试了很多次，根本无法工作。我需要在div中居中的浮动图像。所以我不需要填充和保证金。它会自动很好，当我把另一个图像。

HTML

 < div class =section-global> 
< p class =red> HELLO< / p> 
< p> 
< ul class =image-global> 
< li> 
< img src =assets / images / welcome.jpg/> 
< p> ABC< / p> 
< / li> 
< li> 
< img src =assets / images / welcome.jpg/> 
< p> ABC< / p> 
< / li> 
< li> 
< img src =assets / images / welcome.jpg/> 
< p> ABC< / p> 
< / li> 
< li> 
< img src =assets / images / welcome.jpg/> 
< p> ABC< / p> 
< / li> 
< / ul> 
< / p> 
< / div> 
  

CSS

  .section-global {
 margin：10px 0; 
 border：1px solid＃F63; 
 overflow：hidden; 
} 
 
 .section-global p {
 padding：10px; 
} 
 
 .image-global {
 text-align：center; 
} 
 
 .image-global li {
 float：left; 
 display：inline-block; 
} 
 
 .image-global img {
 width：125px; 
 height：125px; 
 margin：0 auto; 
} 
  

这里是 JSFIDDLE 。任何想法？

解决方案

如果您使用显示，则不必浮动左侧的列表项：inline-block 和 text-align：center 。

，这是你想要的，对吧？

http://jsfiddle.net/ d2rhR / 2 /

刚删除了

  .image-global li {
 
 display：inline-block; 
} 
  

I've tried many times and it couldn't work at all. I need the float images in the centered inside the div. So I don't need to do padding and margin. It will be automatically nice when I put another images.

HTML

<div class="section-global">
    <p class="red"> HELLO </p>
    <p>
        <ul class="image-global">
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
            <li>
                <img src="assets/images/welcome.jpg" />
                <p> ABC </p>
            </li>
        </ul>
    </p>
</div>

CSS

.section-global {
    margin:10px 0;
    border:1px solid #F63;
    overflow:hidden;
}

.section-global p {
    padding:10px;
}

.image-global {
    text-align:center;
}

.image-global li {
    float:left;
    display:inline-block;
}

.image-global img {
    width:125px;
    height:125px;
    margin:0 auto;
}

and here is JSFIDDLE. Any ideas?

解决方案

You don't have to float the list items left if you have used display: inline-block and text-align: center.

If I am correct, this is what you want, right?

http://jsfiddle.net/d2rhR/2/

Just removed the float on

.image-global li {

    display:inline-block;
}

这篇关于浮动图像后，需要以div为中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！