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
