CSS：在伪元素之前：垂直居中

我有一个文本标签，我想在图像前加上它。问题在于我的文字是正常大小，我们假设它是font-size: 12px;，而图像比较大，它有height: 32px;。当我尝试这样做：CSS：在伪元素之前：垂直居中

/* a element CSS */ 
left: 30px; 
margin-left: 30px; 

/* a:before pseudoelement CSS */ 
content: ''; 
width: 24px; 
height: 32px; 
position: absolute; 
top: 2px; 
left: 0px; 
background-position: 0 -88px;

我得到的东西或多或少这样的：

III text text text 
III 
III

什么，我想是这样的：

III 
III text text text 
III

的问题是使用:before的文本将垂直排列到顶部，我希望它以垂直居中。我怎样才能做到这一点？

来源

2014-11-25 ducin

垂直居中文本设置文本的行高度等于图像高度，你可以尝试

line-height: 32px;

来源

2014-11-25 09:44:46

一种选择是使用line-height。

如果你知道li都将有一个特定的高度，你可以设置a标签具有相同的line-height

li { 
    height: 50px; 
} 

li a { 
    line-height: 50px; 
}

这将居中文本到div。

然后，您只需要改变一些更多的CSS，让它位于左侧（例如margin-left）和您想要的任何其他样式。

来源

2014-11-25 09:46:07 Stewartside

使用line-height您的父元素（a）上，并设置其显示为inline-block（不要忘记position: relative让你的伪元素很好地定位）：

a { 
 
    position: relative; 
 
    padding-left: 30px; 
 
    display: inline-block; 
 
    line-height: 32px; 
 
    font-size: 12px; 
 
} 
 

 
a:before { 
 
    content: ''; 
 
    background-image: url(http://placehold.it/24x32); 
 
    width: 24px; 
 
    height: 32px; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-position: center center; 
 
}

<li> 
 
    <span class="download"> 
 
    <a href="#abc">download something</a> 
 
    </span> 
 
</li>

来源

2014-11-25 09:50:32 zessx

1）从伪元素中移除位置。

2）伪元件

FIDDLE

ul { 
 
    list-style-type: none; 
 
} 
 
a { 
 
    margin-left: 30px; 
 
} 
 
a:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    width: 24px; 
 
    height: 32px; 
 
    vertical-align: middle; 
 
    background: url(http://placehold.it/24x32); 
 
}

<ul> 
 
    <li> 
 
    <span class="download"> 
 
    <a href="#abc">download something</a> 
 
    </span> 
 
    </li> 
 
</ul>

来源

2014-11-25 09:57:28 Danield

用于display:table父和display:table-cell儿童

上设置 vertical-align: middle;

来源

2014-11-25 10:00:53

CSS：在伪元素之前：垂直居中

回答

相关问题