CSS : 플로팅 된 리의 가운데 정렬 div 정렬?

HTMLCSS : 플로팅 된 리의 가운데 정렬 div 정렬?

<div class="wrapper join-links"> 
    <ul> 
     <li><a href="link">Whatever</a></li> 
     <li><a href="link">Something</a></li> 
    </ul> 
</div>

CSS

.join-links li { 
    float:left; 
    margin-right:20px; 
}

는 모두 링크 "를 중심으로"를 정렬하거나 sorrounding와 래퍼 사업부의 내부 "정당화"어떻게 든 수 있습니까?

http://jsfiddle.net/CRrmL/

편집 : 내가 바로으로 정렬 할 수 있다면 나 또한 궁금해? display: inline에

출처

2012-05-12 matt

변경 float: left 당신을 제공합니다 : 그런 다음 부모 DIV에 텍스트 정렬 사용할 수 있습니다

.join-links li { 
    display: inline; 
    margin-right:20px; 
}

Example centre align
Example right align

출처

2012-05-12 10:47:05 jacktheripper

또한, 당신은 그들에 대한 당신의 리튬 요소의 각각의 설정 폭 자식 요소를 추가 할 - 디스플레이 이후 : 인라인이 당신의 요소에 대해 치수를 설정 거부 . 또는 display : inline-block을 사용할 수 있지만 오래된 브라우저에서는 엉망이라고 알고 있습니다. =) – benqus

당신은 중심의 일반적인 마진 해킹을 통해이 작업을 수행 할 수 있습니다

.join-links ul{ 
    margin:0 auto; 
}

그런 다음 당신이 li 요소를 설정해야합니다 라인에 표시 할 :

.join-links li { 
    display:inline; 
}

출처

2012-05-12 10:47:50 Darthur

기다리십시오, ul은 기본적으로 표시 : 블록입니다. 그래서 그것은 부모 div로 streches. 왜 너비 : 100 %를하고 싶습니까?. 어쩌면 틀 렸지만 나에게 틀린 것 같다. 친구를 설명하라! =) – benqus

아니, 넌 틀리지 않아. 여기에 "너비"규칙이 필요하지 않습니다. 삭제됨 : – Darthur

또한 text-align : center; =) – benqus

오른쪽 또는 중앙에 알록을 맞추려면 우리에게 필요합니다. 텍스트를 정렬하고 인라인 또는 인라인 블록을 요소에 표시합니다. Float 속성은 모든 요소를 블록으로 변환합니다. http://jsfiddle.net/CRrmL/15/ http://jsfiddle.net/CRrmL/16/

출처

2012-05-12 10:57:10

당신은 같은 정당의 링크를 만들 수 있습니다. li에 클래스를 정의하고 먼저 부동 소수점 li을 왼쪽에두고 두 번째 li을 오른쪽에 부동화하십시오. 당신이 당신의 메뉴 요소가 고정 폭을 갖고 싶어

Check this example

출처

2012-05-12 10:57:23 Libin

CSS : 플로팅 된 리의 가운데 정렬 div 정렬?

답변

관련 문제