html - 在引用 css 中的文本时垂直居中元素

Question

我在 <span> 中有一个背景图片并且我试图将跨度集中在引用文本中，而不管该段落的行数。这是 fiddle 的链接

HTML:

<ul class="leftlist">
    <li itemage="" id="1012" class="todo">
        <a href="#">           
            <span class="uncheck_box cb"></span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula lacus a nisi venenatis, sit amet tempor nunc mattis.</p>
        </a> 
    </li>
</ul>

CSS:

ul.leftlist {
    margin: 0 !important;
    width: 595px;
}
.leftlist ol, ul {
    list-style: none outside none;
    padding: 0;
}
ol, ul {
    list-style: none outside none;
    padding: 0 20px;
}
ol, ul {
    list-style: none outside none;
}
ul.leftlist li a {
    border: 1px solid #999999;
    display: block;
    font-size: 17px;
    min-height: 35px;
    padding: 10px 5px;
    text-decoration: none;
}
span.uncheck_box {
    background: url("http://i39.tinypic.com/22dtvp.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    float: left;
    height: 28px;
    margin: 4px 8px 10px;
    width: 28px;
}

Answer 1

我假设您希望将段落(<span> 元素)左侧的灰色框垂直居中。

我的解决方案包括:

1. 参加 <span>元素脱离文档流，绝对定位
2. 为 <p> 设置左内边距在视觉上为灰色框腾出空间的元素

该策略是使用绝对定位，但您必须记住将父级设置为相对定位。然后该元素位于父容器顶部的 50%(因此垂直居中)，但您还必须考虑元素本身的高度，即垂直偏移其高度的一半( 28/2 = 14px)，上边距为负。

ul.leftlist li a {
    /* original style omitted for clarity */
    position: relative;
}
span.uncheck_box {
    background: url("http://i39.tinypic.com/22dtvp.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    display: block;
    height: 28px;
    width: 28px;
    position: absolute;
    top: 50%;
    left: 10px;
    margin-top: -14px;
}
ul.leftlist li a p {
    padding-left: 40px;
}

http://jsfiddle.net/teddyrised/8vjpj/1/

[编辑]:为了有效性，您可能需要考虑使用 HTML5 data-属性标签，例如使用 data-itemage而不仅仅是 itemage .