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>元素）居中。

我的解决方案涉及：

将<span>元素从文档流中取出，绝对定位
将左边距设置为<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。

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

1 个答案: