Question

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

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

Answer 1

试试这个：

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

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

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

Fiddle to test

Answer 2

如何使用顶部和顶部的填充物呢？底部：

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

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

css垂直对齐跨度

2 个答案: