如何在中间制作文字

Question

hello i am make like this example which i get from www.xxxxxx.com

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

i wanted too learn that so can you help me?

<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>

here the style

.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;
}

here my works http://jsfiddle.net/76E4w/11/

i already add line-align:middle; or line weight but not work;

Answer 1

See working jsFiddle here:

Add display: table; to .bungkus .

Remove float: left; from .kanan .

Add display: table-cell; to .kanan .

Answer 2

When you find a web site doing it as you like, the easiest thing is to run firefox with firebug and to look which css applies.

centering could be done in different ways. one is

text-align: center

An other approach is to set right/left margin to auto

margin: 0 auto;