在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。