1

ここにコードがありますが、垂直方向に整列することはまだうまくいきません。と に入れるために多くのことを試み#mylistました#mylist li img。

CSS:

#mylist
{
list-style-type : none;
padding-top     : 0px;

border:1px solid red;
overflow: hidden;
}

#mylist li
{
float         : left;
padding-right : 3px;
}

#mylist li img
{


}

html:

<div id="div-to-align">
    <ul id="mylist">
    <li><a href="#"><img src="img1.png" alt="" ></a></li>
    <li><a href="#"><img src="img2.png" alt="" ></a></li>
    <li><a href="#"><img src="img3.png" alt="" ></a></li>
    <li><a href="#"><img src="img4.png" alt="" ></a></li>
    </ul>
<span>Some text here. Everything should be centered vertically</span>
</div>
4

2 に答える 2

2

liに css を追加し、 imgに vertical-align:middle を追加してみてください

#mylist
{
    list-style-type : none;
    padding-top     : 0;
    border:1px solid red;
    overflow: hidden;
}
#mylist li {
    display:inline-block
}
#mylist li img
{
    vertical-align:middle

}
于 2012-07-17T07:08:17.313 に答える
1

float: leftそのように使用します：

#mylist li
{
    float: left;
    list-style-type : none;
    padding-top     : 0px;

    border:1px solid red;
    overflow: hidden;
}

編集： ここで行った修正後、更新されたバージョンがあります：

#mylist {   
    position : relative;            
    display : inline-block; 
    left : 40%; // depends on the width of the image
    list-style-type : none;
    padding-top     : 0px;

    border :1px solid red;
    overflow : hidden;
}
#clear {
    clear : both;     
}

#mylist li {
    float : left;
    padding-right : 3px;
}​

これはあなたが必要なものですか？divまたは親要素の中心に画像を配置します。

于 2012-07-17T07:10:06.587 に答える