마진을 0으로 맞추지 못하는 이유는 무엇입니까?
나는 #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>
부모 요소가 아닌 가운데에 맞추는 요소의 너비를 정의해야합니다.
#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;
}
인라인 블록은 전체 라인 (왼쪽에서 오른쪽으로)을 커버하므로 여백은 왼쪽 및 / 또는 오른쪽에서 작동하지 않습니다. 필요한 것은 블록입니다. 블록은 왼쪽과 오른쪽에 테두리가 있으므로 여백의 영향을받을 수 있습니다.
This is how it works for me:
#content {
display: block;
margin: 0 auto;
}
Why not?
#header {
text-align: center;
}
#header ul {
display: inline;
}
I don't know why the first answer is the best one, I tried it and not working in fact, as @kalys.osmonov said, you can give text-align:center to header, but you have to make ul as inline-block rather than inline, and also you have to notice that text-align can be inherited which is not good to some degree, so the better way (not working below IE 9) is using margin and transform. Just remove float right and margin;0 auto from ul, like below:
#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 */
}
This way can fix the problem that making dynamic width of ul center if you don't care IE8 etc.
We can set the width for ul tag then it will align center.
#header ul {
display: block;
margin: 0 auto;
width: 420px;
max-width: 100%;
}
참고URL : https://stackoverflow.com/questions/963636/why-cant-i-center-with-margin-0-auto
'Programming' 카테고리의 다른 글
| 10 억 숫자의 중앙값 계산 (0) | 2020.07.10 |
|---|---|
| 스칼라에서 '20 초 '는 어떻게 작동합니까? (0) | 2020.07.10 |
| GitHub의 이슈에서 기존 브랜치를 어떻게 참조합니까? (0) | 2020.07.07 |
| Windows 업데이트로 인해 MVC3 및 MVC4 작동이 중지됨 (0) | 2020.07.07 |
| Python3 정수 나누기 (0) | 2020.07.07 |