无法居中：在 div 中的图像与其他内容之前

Posted 2023-03-05

【中文标题】无法居中：在 div 中的图像与其他内容之前

【英文标题】：Unable to center :before image in div with other content

【发布时间】：2014-07-12 14:51:57

【问题描述】：

我试图在 :before 伪元素中垂直居中图像。我在这里（和其他地方）发现了一些关于它的问题，但不幸的是我无法使用这些提示。

我想将图像居中放在 to 文本行之间：

一个 js 小提琴：

http://jsfiddle.net/kaze72/vb5z4/1/

<div class="body">
    <div class="welcomeHeader">         
        <h3>Welcome</h3>
        <h6>Adam Testorsson</h6>
    </div>
    <p>other stuff</p>
</div>

主css：

.welcomeHeader 
    padding-left: 30px;
    display: inline-block;


.welcomeHeader:before 
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    /* background-position: 0px -20px; */
    display: inline-block;
    content: ' ';
    vertical-align: -50%;
    width: 12px;
    height: 12px;
    margin-left: -22px;
    margin-top: -3px;

【问题讨论】：

vertical-align 将不起作用，因为您试图将其与两个块级标题对齐......并且在任何情况下（-505）在该属性中都是无效的。

我从这个得到了 -50%：***.com/questions/2833027/…，但是这个小费对我不起作用。

感谢大家的建议和cmets :-)

【参考方案1】：

就是这样：http://jsfiddle.net/vb5z4/5/

此解决方案基于background-position：我将 :before 元素设为其父元素的 100% 高度，并将其背景设置为其垂直中心。

.welcomeHeader 


   padding-left: 30px;
    display: inline-block;
    position: relative; // Need the parent to be relative


.welcomeHeader:before 
    position: absolute; // :before becomes absolute
    top: 0;
    left: 0;
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    background-repeat: no-repeat; // don't repeat background
    background-position: left center;
    display: inline-block;
    content: ' ';

    width: 12px;
    height: 100%;
    margin-left: -22px;
    margin-top: -3px;


* 
    font-size: 13px;
    margin: 5px;

这种技术的好处是即使你改变了背景，它仍然是垂直居中的，不需要固定负边距（这取决于图像高度）。

【讨论】：

+1 干净的方法。但是，不需要负边距。绝对定位的元素必须理想地使用 top/left 定位。

【参考方案2】：

将position:relative; 添加到.welcomeHeader。 删除边距并将其添加到.welcomeHeader:before

position: absolute;
    top: 50%;
    left: 0;
    margin-top: -6px;

我已经更新了你fiddle。看看吧。

【参考方案3】：

如果您仍希望使用 pseduo 元素，最好使用绝对位置。

JSfiddle Demo

HTML

<div class="body">
    <div class="welcomeHeader">         
        <h3>Welcome</h3>
        <h6>Adam Testorsson</h6>
    </div>
    <p>other stuff</p>
</div>

CSS

.welcomeHeader 
    padding-left: 30px;
    display: inline-block;
    position: relative;


.welcomeHeader:before 
    background-image: url('http://www.ronnebybloggen.se/pics/apml.png');
    /* background-position: 0px -20px; */
    content: ' ';
    width: 12px;
    height: 12px;
    position: absolute;
    top:50%;
    margin-top: -6px; /* half of height */
    left:0; /* or someother required value */



* 
    font-size: 13px;
    margin: 5px;


h6 
    font-weight: normal;