1

我在 a 中有一个背景图像，<span>并且无论段落的行数如何，我都试图集中参考文本的跨度。这是小提琴的链接

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

1 回答 1

2

我假设您希望将段落（元素）左侧的灰色框垂直居中。<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/

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

于 2013-10-22T17:56:26.960 回答