Question

我正试图将图像垂直居中于：之前的伪元素。我在这里（和其他地方）发现了一些关于它的问题，但不幸的是我无法使用这些技巧。

我想让图像居中到文本行之间：

js-fiddle：

<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;
}

Answer 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;
}

这项技术的优点在于，即使您更改背景，它仍然会垂直居中，无需修复负边距（取决于图像高度）。

Answer 2

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

中添加这些边距

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

我已更新了您fiddle。看看吧。

Answer 3

如果您仍然希望使用伪元素，最好在其上使用绝对位置。

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;
}

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

3 个答案: