如果在不支持的旧版浏览器中水平居中div而没有宽度显示:inline-block属性。
如何在没有宽度的情况下水平居中 .container div
<div class="main_section">
<div class="content_wrapper">
<div class="container">My content</div>
</div>
</div>
答案 0 :(得分:3)
制作您想要居中的内容(.container
)内嵌块。这样,您可以在父div上使用text-align: center
居中。
.container {
display: inline-block;
background-color: red;
}
.content_wrapper {
background-color: blue;
text-align: center;
}
&#13;
<div class="main_section">
<div class="content_wrapper">
<div class="container">My content</div>
</div>
</div>
&#13;
答案 1 :(得分:0)
body {
padding: 200px 0 0 0;
margin: 0;
}
.main_section {
float: right;
position: relative;
right: 50%;
z-index: 999;
}
.content_wrapper {
float: right;
position: relative;
right: -50%;
}
.container {
color: #333;
background: #f5f5f5;
border: 5px #ccc solid;
padding: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
letter-spacing: 1px;
max-width: 1000px;
box-shadow: -1px -1px 5px 1px #666666;
}
&#13;
<div class="main_section">
<div class="content_wrapper">
<div class="container">Div align center without fix width</div>
</div>
</div>
&#13;
答案 2 :(得分:0)
您可以尝试设置外部div余量:0 auto
它也适用于响应。