我试图水平中心一个<div>块元素在页面上，并将其设置为最小宽度。最简单的方法是什么?我想要<div>元素内联与我的页面的其余部分。我来举个例子:
page text page text page text page text
page text page text page text page text
-------
| div |
-------
page text page text page text page text
page text page text page text page text
当前回答
CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >
您的图表还显示了块级元素(通常是div)，而不是内联元素。
在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。
其他回答
在大多数浏览器，这将工作:
div.centre { 宽度:200 px; 显示:块; background - color: # eee; margin-left:汽车; margin-right:汽车; ｝ <div class=" center ">一些文本</div>
在IE6中，你需要添加另一个外部div:
div.layout { text-align:中心; ｝ div.centre { text-align:左; 宽度:200 px; background - color: # eee; 显示:块; margin-left:汽车; margin-right:汽车; ｝ < div class = "布局”> <div class=" center ">一些文本</div> < / div >
使用jQuery:
$(document).ready(function() {
$(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(".myElement").css({
"display" : "block",
"position" : "relative",
"max-width" : "75%", // for example
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
或者，如果你想用".myElement"类居中每个元素:
$(document).ready(function() {
$(".myElement").each(function() {
$(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
$(".myElement_container_new").css({// for IE6
"display" : "block",
"position" : "relative",
"margin" : "0",
"padding" : "0",
"border" : "none",
"background-color" : "transparent",
"clear" : "both",
"text-align" : "center"
});
$(this).css({
"display" : "block",
"position" : "relative",
"max-width" : "75%",
"margin-left" : "auto",
"margin-right" : "auto",
"clear" : "both",
"text-align" : "left"
});
});
});
如果你知道你的div的宽度并且它是固定的，你可以使用下面的css:
margin-left: calc(50% - 'half-of-your-div-width');
'half-of-your-div-width'显然应该是div宽度的一半。
在你的html文件中，你写:
<div class="banner">
Center content
</div>
你写的CSS文件:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
对我有用。
CSS, HTML: Div.mydiv{宽度:200px;Margin: 0 auto} < div class = " mydiv”> 我在中间 < / div >
您的图表还显示了块级元素(通常是div)，而不是内联元素。
在我的头顶，在FF2+/Safari3+/IE7+中支持min-width。可以在IE6上使用巧妙的CSS，或者简单的JS。
