需要跨越图像中间但不起作用

时间:2014-01-10 15:17:30

标签: html

我正在尝试将文字放在中间关于图像,但它不起作用。

我试过这个但是没有工作

Vertically align text next to an image?

HTML

<div id="z" class="cz">
    <div id="a" class="ca"> 
        <img src="http://www.skateboardsofchoice.co.uk/assets/meta/130/130/1/blanks_88623933c05cc5bbb9d99ed2fe6a74e6.jpg" />
    </div>
    <div id="b" class="cb"> 
        <span id="spanID" class="someClass">Some Text</span>
        <img src="http://www.ucl.ac.uk/Library/Images/ml_big_go.gif" />
    </div>
</div>

CSS

.cz { 
    width:100%; 
    height: 30%;
    float:left;
    position:relative;
}

.ca { 
    margin: 5px 0px 0px 30px;
}

.cb { 
 position:absolute;
    text-align: center;
    vertical-align: middle;
    right:0;
    top:0;
    margin: 20px 20px 0px 0px;
}

http://jsfiddle.net/frsA5/116/

1 个答案:

答案 0 :(得分:1)

vertical-align:middle同时提供给span和image。

小提琴here

Vertical-align img也可以正常工作,但是要在更安全的一侧对齐跨度中间。