如何在中间制作文字

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

在这里查看工作的jsFiddle：

添加display: table; 到.bungkus 。

移除float: left; 来自.kanan 。

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

Answer 2

当您找到一个自己喜欢的网站时，最简单的方法是使用firebug运行firefox ，并查看哪个CSS适用。

对中可以以不同的方式完成。 一个是

text-align: center

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

margin: 0 auto;