Question

我试图将图像置于.pics div中，但css不起作用

<article class="pics"> 
         <ul>
            <li><img class="default" alt="cake" src="images/IMG_2774_opt.jpg"></li>
            <li><img class="default" alt="cake" src="images/198_opt.jpg"></li>
            <li><img class="default" alt="cake" src="images/IMG_2774_opt.jpg"></li>
         </ul>  
</article>

CSS：.pics { width: 100%; vertical-align: middle; }

不起作用

Answer 1

http://jsfiddle.net/bth9g/

HTML：

<div class="center" >
    <div class="centered">
        <div class="img"></div>  
    </div>
</div>

CSS：

.center{
    height:200px;
    width:200px;
    background:black;
    display:table;
}
.centered{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.img{
    display:inline-block;
    background:yellow;
    height:50px;
    width:50px;
}

Answer 2

我想指出一个非常简单的解决方案

http://www.w3.org/Style/Examples/007/center.en.html

IMG.displayed {
    display: block;
    margin-left: auto;
    margin-right: auto }
...
<IMG class="displayed" src="..." alt="...">

如何将图像置于div内

2 个答案: