css垂直对齐跨度

时间:2011-05-26 13:49:01

标签: css

我试图将所有内容保持垂直对齐,但似乎无法弄明白

这是css

fieldset span{
    padding:50px 10px 0px 10px;
    float:left;
    clear:none;
}
fieldset span.buttons{
    float:right;
}

和html标记

<fieldset class="remove">
    <span class="itemtype">story</span>
    <span class="itemtype">53547</span>
    <span class="title">New online education program aimed at curbing dangerous drinking</span>
    <span class="buttons">
        <a href="#" target="blank"><img src="img/edit.png" alt="edit story" />Edit</a>
        <a href="#7" target="blank"><img src="http://www.bibliomania.com/graphics/read.gif" alt="read story" />Read</a>
    </span>
    <input type="hidden" name="featured[items][53547]" value="story" />
</fieldset>

fiddle您可以看到图片如何向下推,“a”标签文字中的文字也需要更正

修改

使用背景图片会很不错,但这会让图片在文字下面看new fiddle

2 个答案:

答案 0 :(得分:6)

试试这个:

fieldset span a img {
    vertical-align: middle;
}

Vertical-align是一个CSS属性,经常被错误地对齐文本。然而,它的目的是对齐图像(是的,它也会对齐文本,但仅限于table)。

请参阅CSS-tricks.com - What is vertical-align

Fiddle to test

答案 1 :(得分:3)

如何使用顶部和顶部的填充物呢?底部:

fieldset span{
    padding:25px 10px 25px 10px;
...

http://jsfiddle.net/SxCH2/5/