CSS 배경이 가운데 맞춤 텍스트 왼쪽에 정렬

각 항목이 인 가운데 수직 메뉴가 있습니다. 이것은 ul/li로 수행됩니다.CSS 배경이 가운데 맞춤 텍스트 왼쪽에 정렬

각 항목마다 반복 가능한 배경 이미지을 갖고 싶습니다. 모든 항목은 왼쪽에 정렬되지만 오른쪽에있는 텍스트 너비와 정렬됩니다. 는 HTML 구조로 된 div 추가 할 수 있습니다, 물론 illustration as an image

: 여기

내가 뭘 원하는지의 그림입니다.

감사합니다.

출처

2014-02-26 user3355736

안녕하세요. 관련 CSS + HTML을 질문에 항상 게시하십시오. –

작업 예제를 바이올린으로 제공하면 좋을 것입니다. – Harish

CSS – pstenstrm

그것은 범위와 의사 요소와 가능성이 대신 # 666의 배경 이미지를 추가가되지 않습니다 희망

Codepen Demo

HTML

<div class="wrapper"> /* not required */ 
    <ul> 
    <li class="center"><span>Some Long Text</span></li> 
    <li class="center"><span>Some Text</span></li> 
    <li class="center"><span>Text</span></li> 
    </ul> 
</div>

CSS

ul { 
    padding: 0; 
    margin: 0; 
} 

/* THE GOOD STUFF */ 

li{ 
    overflow:hidden; /* hides all extra pixels */ 
    font-size:2em; 
    padding: 0; 
    margin-bottom:.5em; 
} 

.center { 
    text-align:center; 
} 

li > span { 
    diaplay:inline-block; 
    background:red; 
    position:relative; 
    padding-right:0.5em; 
} 

li.center > span:before { 
    content: ""; 
    position: absolute; 
    right:100%; 
    top: 0; 
    height:100%; 
    width:2000px; /* some really large number*/ 
    background:red; 
    margin-right:0; /* or remove and add padding-right to span */ 
}

출처

2014-02-26 13:08:50

정말 대단한 답변입니다. 나는 네게 절한다 !! – nightgaunt

아이디어 : http://css-tricks.com/full-browser-width-bars/ –

아주 좋습니다! IE (8)에서는 작동하지 않습니다 ... – user3355736

이것은 CSS만으로는 불가능합니다. 그래서 저는 jQuery로 이것을 만들었습니다.

HTML은

<ul> 
    <li><span class="center">Text</span></li> 
    <li><span class="center">Text big</span></li> 
    <li><span class="center">Text small</span></li> 
</ul>

이 내가 스크립트에서 할 모든입니다.

$('li .center').each(function() { 
    var width = $(this).width(); 
    $(this).css({"paddingLeft": (200 - width)/2 + 'px'}); 
});

나는 참조 용으로 fiddle을 추가했습니다.

는 당신이 문제 .center

출처

2014-02-26 13:06:44 nightgaunt

CSS 배경이 가운데 맞춤 텍스트 왼쪽에 정렬

답변

관련 문제