该博客介绍了如何通过设置HTML元素的宽度和margin属性为auto来实现内容的居中对齐。示例中包含了一个外部div（div3）和一个内部div（div4），内部div包含两个按钮。外部div设置了固定宽度并应用了margin:auto，从而使其在页面上居中。而内部div仅设置了margin:auto，但由于没有指定宽度，因此无法实现居中对齐。
1.先给DIV设置宽度（尽量等于内嵌元素的宽度之和）。
2.再设置margin:auto;即可。
注：不设宽度margin：auto；实现不了居中对齐的效果。
浏览器显示效果如下：
源码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div3 {
background-color: white;
border: 5px solid rgb(95, 95, 95);
height: 170px;
width: 300px;
margin: auto;
}
#div4 {
margin: auto;
background-color: red;
width: 100px;
margin: auto;
}
</style>
</head>
<body>
<div id="div3">
<div id="div4">
<input id="btn2" type="button" value="恢复">
<input id="btn3" type="button" value="确定">
</div>
</div>
</body>
</html>
扫一扫
339
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
