CSS垂直對齊跨度

我試圖把一切都垂直排列的，但似乎無法推測出來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

來源

2011-05-26 mcgrailm

你怎麼想它對齊？對我而言，這些元素在底部對齊。 – 2011-05-26 13:52:48

垂直居中 – mcgrailm 2011-05-26 13:53:45

怎麼樣只是用填充兩個頂部&底部：

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

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

來源

2011-05-26 14:06:15 gutierrezalex

這仍然沒有把一切都在一個不錯的尼斯行看到如何鏈接和圖像不符合其他 – mcgrailm 2011-05-26 14:10:03

更新我的朋友。我刪除了圖片標籤並將它們放在CSS中。只要給每個鏈接一個id來區分。 http://jsfiddle.net/SxCH2/6/ – gutierrezalex 2011-05-26 17:29:11

看起來真棒謝謝，實際上填充只需要10px – mcgrailm 2011-05-26 17:42:56

試試這個：

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

Vertical-align是經常misued到CSS屬性對齊文本。然而其目標是對齊圖像（是的，它也確實對齊文本，但只在table）。

見CSS-tricks.com - What is vertical-align

Fiddle to test

來源

2011-05-26 14:00:26

+1，但你的小提琴有'vertical-align：baseline'：P – atlavis 2011-05-26 14:11:19

如果我改變你的小提琴使用中間而不是basline的鏈接看起來更好，但按鈕跨度仍然低於其他跨度 – mcgrailm 2011-05-26 14:11:56

是啊，因爲頁面寬度小於跨度寬度 – atlavis 2011-05-26 14:15:17

CSS垂直對齊跨度

回答

相關問題