我试图水平中心一个<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
当前回答
问题的标题和内容实际上是不同的，所以我将发布两个解决方案，使用Flexbox。
我猜在IE8和IE9完全被摧毁之前，Flexbox将取代/添加到当前的标准解决方案中;)
检查当前flexbox的浏览器兼容性表
单一的元素
.container { 显示:flex; justify-content:中心; ｝ < div class = "容器" > < img src = " http://placehold.it/100x100 " > < / div >
多个元素，但只以一个为中心
默认行为是flex-direction: row，将所有子项对齐在一行中。将其设置为flex-direction: column将有助于堆叠的行。
.container { display: flex; flex-direction: column; } .centered { align-self: center; } <div class="container"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> <div class="centered"><img src="http://placehold.it/100x100"></div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p> </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和span标签以及css属性，如块，跨浏览器内联块和文本对齐中心，见我的简单示例
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.block{display:block;}
.text-center{text-align:center;}
.border-dashed-black{border:1px dashed black;}
.inline-block{
display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;
}
.border-solid-black{border:1px solid black;}
.text-left{text-align:left;}
</style>
</head>
<body>
<div class="block text-center border-dashed-black">
<span class="block text-center">
<span class="block">
<!-- The Div we want to center set any width as long as it is not more than the container-->
<div class="inline-block text-left border-solid-black" style="width:450px !important;">
jjjjjk
</div>
</span>
</span>
</div>
</body>
</html>
对这个问题最好的回答是使用margin-auto，但要使用它，你必须知道你的div的宽度在px或%。
CSS代码:
div{
width:30%;
margin-left:auto;
margin-right:auto;
}
在你的html文件中，你写:
<div class="banner">
Center content
</div>
你写的CSS文件:
.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}
对我有用。
margin: 0 auto;
正如ck所说，不是所有浏览器都支持min-width
