마진 : 0 자동으로 중심을 잡을 수없는 이유는 무엇입니까?

130

나는 #headerdiv가 100% width있고 그 div 내에 순서가없는 목록이 있습니다. margin: 0 auto정렬되지 않은 목록에 적용 했지만 헤더 div의 가운데에 배치하지 않습니다.

아무도 이유를 말해 줄 수 있습니까? 부모 div의 너비를 정의하면 정렬되지 않은 목록이 중심을 맞출 수 있어야한다고 생각했습니다 margin: 0 auto. 내가 무엇을 놓치고 있습니까?

내 코드는 다음과 같습니다.

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— dude 프
소스

어떤 브라우저를 사용하고 있습니까? IE / Win에는 Margin auto에 문제가 있습니다.

— JD Frias

왜 당신은 또한 오른쪽으로 당신의 ul를 떠? 그것을 빼내고 아마 float : left를 li로 가져 가면 괜찮을 것입니다.

— Simon

1

탐색 모음을 만들고 있습니다. 나는 ul에 대한 float를 꺼내서 li에 대한 float를 왼쪽에 넣었지만 지금은 왼쪽에 있습니다.

— zeckdude

135

부모 요소가 아닌 가운데에 맞추는 요소의 너비를 정의해야합니다.

#header ul {
    margin: 0 auto;
    width: 90%;
}

편집 : 좋아, 나는 지금 테스트 페이지를 보았고, 여기 내가 원하는 생각이 있습니다 :

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— 패트릭
소스

2

ul의 너비가 동적이면 어떻게 될까요? 나중에 PHP를 사용하여 li에 다른 텍스트를 동적으로 넣을 생각이므로 그것을 예상하려고합니다.

— zeckdude

2

네, 그러면 margin : auto;

— PatrikAkerstrand

1

최신 제안을 시도했지만 작동하지 않았습니다. 권장 사항이있는 최신 버전을 동일한 위치에 업로드하여 내가 겪고있는 것을 볼 수 있습니다. ul은 약 50px 오른쪽으로 밀리고 있습니다.

— zeckdude

1

내 제안에서 말했듯이 float를 제거하십시오. left

— PatrikAkerstrand

1

그것은 훌륭했다! 나와 함께 붙어 나를 도와 주셔서 대단히 감사합니다! 그 문제는 나를 죽이고있다! 다시 감사합니다!

— zeckdude

43

인라인 블록은 전체 라인 (왼쪽에서 오른쪽으로)을 커버하므로 여백은 왼쪽 및 / 또는 오른쪽에서 작동하지 않습니다. 필요한 것은 블록입니다. 블록은 왼쪽과 오른쪽에 테두리가 있으므로 여백의 영향을받을 수 있습니다.

이것이 나를 위해 작동하는 방법입니다.

#content {
display: block;
margin: 0 auto;
}

— ek 스
소스

매우 유용한 제안을 주셔서 감사합니다, 나는 인라인 요소와 같은 문제를했고 나는 그것이 작동하지 않는 이유를 이해할 수 없었다

— mastazi

이것은 가장 좋은 대답이며 다중 크기 창에서 작동합니다.

— Yuda Prawira

14

왜 안돼?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
소스

텍스트 정렬을 추가했습니다 : left; #header ul을 사용하여 ul을 중앙에 배치하고 li의 텍스트를 왼쪽에 정렬합니다. 또한 너비가 동적 (자동)이되도록 ul을 인라인 블록으로 표시하도록 설정해야했습니다.

— 브렌트 셀프

3

첫 번째 대답은 최고의 하나 왜 나는 kalys.osmonov 말했다 @, 당신이 줄 수있는 사실에서 작업을 시도하지 모르겠어요 text-align:center에 header,하지만 당신은 확인해야합니다 ul같은 inline-block보다는를 inline, 또한 당신은 통지에있다 그것은 text-align더 나은 방법 (IE 9 이하로 작동하지 않는)을 사용하고 있으므로, 어느 정도 좋은하지 않은 상속 될 수 있습니다 margin와 transform. 그냥 제거 float right및 margin;0 auto에서 ul다음과 같은 :

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

이 방법은 ulIE8 등을 신경 쓰지 않으면 센터의 동적 너비를 만드는 문제를 해결할 수 있습니다 .

— 청구서 두
소스

0

ul 태그의 너비를 설정하면 가운데가 정렬됩니다.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— 바니 S
소스