垂直對齊CSS：之前和之後：內容

我想將圖片鏈接居中，但似乎無法以任何方式垂直移動內容。垂直對齊CSS：之前和之後：內容

<h4>More Information</h4> 
<a href="#" class="pdf">File Name</a>

的圖標爲22 178x22像素

.pdf { 
    font-size: 12px; 
} 
.pdf:before { 
    padding:0 5px 0 0; 
    content: url(../img/icon/pdf_small.png); 
} 
.pdf:after { 
    content: " (.pdf)"; 
    font-size: 10px; 
} 
.pdf:hover:after { 
    color: #000; 
}

來源

2010-05-14 theorise

考慮使用flex：http://stackoverflow.com/a/22218694/435605 - 答案是文字，但適用於所有元素。 – 2015-11-26 17:20:10

感謝CSS3的[子字符串匹配屬性選擇器]（https://www.w3.org/TR/css3-selectors/#attribute-substrings），你現在可以做'a [href $ =「。pdf」] {... }'甚至不需要班級。 – 2017-09-29 21:51:30

在閱讀了關於vertical-align CSS屬性的建議之後回答了我自己的問題。謝謝你的提示！

.pdf:before { 
    padding: 0 5px 0 0; 
    content: url(../img/icon/pdf_small.png); 
    vertical-align: -50%; 
}

來源

2010-05-14 09:38:48 theorise

不錯。對我有效的是vertical-align：super; – DBUK 2012-07-03 13:54:41

我不是CSS專家，但如果你把vertical-align: middle;到您的.pdf:before指令會發生什麼？

來源

2010-05-14 09:30:02 Chowlett

真棒，中間沒有工作，所以我不得不使用一個負的百分比，而不是感謝頭！ – theorise 2010-05-14 09:39:43

很高興幫助。「中」沒有做什麼，或者什麼也沒有做，但是不是你想要的？ – Chowlett 2010-05-14 09:41:32

亂用行高屬性應該做的伎倆。我沒有測試過這個，所以確切的值可能不是正確的，但是從1.5em開始，並以0.1爲增量調整它直到它排隊。

.pdf{ line-height:1.5em; }

來源

2010-05-14 09:35:02 Mathew

應該爲文本內容做訣竅！ – hereandnow78 2014-07-02 10:08:07

我剛剛發現了一個非常整潔的解決方案，我認爲。訣竅是設置圖像（或任何內容）的line-heightheight。

文本

使用CSS：

div{ 
    line-height: 26px; /* height of the image in #submit span:after */ 
} 

span:after{ 
    content: url('images/forward.png'); 
    vertical-align: bottom; 
}

這很可能也沒有跨度工作。

來源

2012-07-28 11:26:48 JoomFever

我認爲一個更簡潔的方法是繼承垂直對齊方式：

在HTML：

<div class="shortcut"><a href="#">Download</a></div>

而且在CSS：

.shortcut { 
    vertical-align: middle; 
} 
.shortcut > a:after { 
    vertical-align: inherit; 
{

這樣的圖標將在任何正確對齊分辨率/字體大小組合。非常適合圖標字體。

來源

2013-04-02 08:38:00

完美。簡單而優雅 – kasongoyo 2016-08-26 09:51:08

我花了大量的時間嘗試今天的工作，並不能使用行高或垂直對齊工作。我能夠找到的最簡單的解決方案是將< a/>設置爲相對定位，以便它包含絕對值，並且：將之後的定位完全從流中排除。

a{ 
    position:relative; 
    padding-right:18px; 
} 
a:after{ 
    position:absolute; 
    content:url(image.png); 
}

在這種情況下，後圖像似乎自動居中，至少在Firefox/Chrome下。由於< a/>上的間距過大，瀏覽器不支持以下情況可能會略微偏激。

來源

2013-11-22 09:53:20

您也可以使用表格來實現這一點，如：

.pdf { 
    display: table; 
} 
.pdf:before { 
    display: table-cell; 
    vertical-align: middle; 
}

下面是一個例子：https://jsfiddle.net/ar9fadd0/2/

編輯：您也可以使用Flex做到這一點：

.pdf { 
    display: flex; 
} 
.pdf:before { 
    display: flex; 
    align-items: center; 
}

這是一個例子：https://jsfiddle.net/ctqk0xq1/1/

來源

2016-07-02 19:42:09 fassl

這兩個工具都不適用於Chrome 52 – stealthwang 2016-08-22 21:37:00

這兩種工具都適用於Chrome瀏覽器版本52.0.2743.116（64位）（Linux） – fassl 2016-08-24 11:34:26

既不適用於OSX。 http://imgur.com/bqUQ09X – stealthwang 2016-08-24 19:40:09

我有一個類似的問題。這是我做的。由於我試圖垂直居中的元素的height = 60px，我設法使用垂直居中：

top：calc（50％ - 30px）;

來源

2017-08-02 11:00:49 user2606576

垂直對齊CSS：之前和之後：內容

回答

相關問題