垂直对齐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：之前和之后：内容

回答

相关问题