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. 은 회색 상자 시각적

위한 공간을 만들기 위해 <p> 소자 좌측 여백을 설정 문서 흐름 밖으로 <span> 촬영 소자 절대적

그것을 위치

전략은 절대 위치 지정을 사용하는 것이지만 상위 위치를 상대 위치로 설정하는 것을 기억해야합니다. 요소는 부모 컨테이너의 상단에서 50 % 위치에 있으므로 (즉, 수직으로 가운데에 배치) 요소의 높이를 고려해야합니다. 요소의 높이는 높이의 절반만큼 수직으로 상쇄됩니다 (28/2 = 14 픽셀).

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-itemage를 사용하는 대신에 단지 itemage 같은 속성에 대한 HTML5를 data- 태그 사용을 고려할 수 있습니다.