Question

你好，我是这样的例子，我从www.xxxxxx.com获得

http://s1172.photobucket.com/albums/r568/novikoraharja/?action=view&current=justanimage.png

我也想知道你能帮助我吗？

<div class="panjang">
    <ul>

        <li class="bungkus">

            <div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/> </div>
            <div class="kanan">Very loooooong </div>
        </li>

        <li class="bungkus">
            <div class="kiri"><img src="http://i1172.photobucket.com/albums/r568/novikoraharja/3.jpg"/></div>
            <div class="kanan">Very loooooong text sooo lonngg </div>
        </li>

    </ul>
</div>

这里的风格

.panjang{width:400px;height;100px;}

.bungkus{width:200px; height:50px; background:yellow;}
.bungkus img { width:60px; height:40px; margin:5px 10px;}

.kiri { float:left; background:red; width:80px; height:50px; }
.kanan{vertical-align:middle; background:cyan; float:left;width:120px;height:50px;font-size:12px;vertical-align:middle;
}

这里我的作品http://jsfiddle.net/76E4w/11/

我已经添加了line-align：middle;或线重但不起作用;

Answer 1

的 See working jsFiddle here: 的

将display: table;添加到.bungkus。

从float: left;删除.kanan。

将display: table-cell;添加到.kanan。

Answer 2

如果您发现网站正常运行，最简单的方法是使用 firebug 运行 firefox 并查看适用的CSS。

可以通过不同的方式进行定心。一个是

text-align: center

另一种方法是将右/左边距设置为自动

margin: 0 auto;

如何在中心制作文字

2 个答案: