고정 폭이없는 div를 포함하는 div를 정렬하는 방법

래퍼 div 안에 ul 메뉴가 있습니다. 각각의 li 요소는 float : left (가로 메뉴)입니다. 내 페이지 컨테이너 (약 1100px)의 가운데에 메뉴를 표시하고 싶지만 메뉴의 크기가 어떻게 될지 알지 못하므로 "margin : 0 auto"를 사용할 수 없습니다.고정 폭이없는 div를 포함하는 div를 정렬하는 방법

나는 많은 다른 것들을 시도했지만, 나는 이것을 작동시킬 수 없다.

이것은 워드 프레스의 메뉴이므로 ul 및 래퍼 div의 마크 업은 wordpress에 의해 생성됩니다. 이하지에 혼란을 선호하는 것 ...

출처

2012-03-16 Moshe Shaham

사용 마진 :이 같은 0 자동; 또한 display : 블록을 사용하십시오; 왼쪽 : 50 %; 희망이 도움이 – RSM

을 당신은 당신의 용기 display:inline-block을 정의하고과 같이, 재산 text-align:center을 설정하여 용기의 중심에 텍스트를 정렬 할 수 있습니다

CSS

.nav > li { 
    display:inline-block; 
    *display:inline; /* ie7 fix */ 
    zoom:1; /* hasLayout ie7 trigger */ 
} 

.nav { 
    text-align:center; 
}

출처

2012-03-16 11:54:17

네, 그게 효과가! 고맙습니다. –

@Andres llich 내 탐색 li css float : 왼쪽; 여백 : 0 10px; 표시 인라인 블록을 사용하는 대신 내 원 (목록 스타일 유형)을 떠 다니는 부동 소수점을 제거하지만이 목록 스타일 유형과 중심에서 ul을 원합니다. –

display:inline-block 속성을 사용하는 것이 좋습니다.

body{ 
    text-align:center; 
} 
.parent{ 
    text-align:left; 
    background:red; 
    display:inline-block; 
    *display:inline;/* For IE7*/ 
    *zoom:1;/* For IE7*/ 
}

확인이 http://jsfiddle.net/pJs6e/2/

출처

2012-03-16 11:56:52 sandeep

<div style="position: relative; width:100%"> 
    <div style="position: relative; left: 50%; float: left;"> 
     <div style="position: relative; right: 50%;"> 

     <!-- the image width is unknown --> 
     <img src="https://react-bootstrap.github.io/assets/logo.png" /> 
     </div> 
    </div> 
    </div>

https://jsbin.com/miteliwafu/edit?html,output

출처

2016-01-23 11:32:10

고정 폭이없는 div를 포함하는 div를 정렬하는 방법

답변

관련 문제