image.png
image.png
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer-更懂你的 Web 弹窗解决方案</title>
<script src="http://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<style>
.box {
height: 200px;
width: 300px;
border: 3px solid goldenrod;
}
.boxRed {
text-align: center;
}
.box1 {
float: left;
}
.boxall {
height: 200px;
width: 300px;
border: 3px solid goldenrod;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="boxRed">想要居中显示---文本居中显示</div>
<div class="boxRed"><span>想要居中显示---行内元素居中显示</span></div>
<div class="boxRed">
<div>想要居中显示---块级元素</div>
</div>
<div class="boxRed">
<div>
<div>9090</div>
<div>8080</div>
</div>
</div>
<!-- 1.text-align可以让块级元素里面的文本或行内元素对齐。 -->
</div>
<!-- 问题1：给浮动的元素设置水平居中 -->
<!-- 解法一：给浮动元素的外层设置：display:inline-block; -->
<div class="boxall">
<div style="display: inline-block;">
<div class="box1">box1</div>
<div class="box1">|</div>
<div class="box1">box2</div>
</div>
</div>
<!-- 解法二：给浮动元素外层的div：设置宽度并且margin:0px auto; -->
<div class="boxall">
<div style="margin:0px auto;width:100px">
<div class="box1">box1</div>
<div class="box1">|</div>
<div class="box1">box2</div>
</div>
</div>
</body>
</html>
效果展示：
image.png
