兼容性：不兼容IE7
1.左右对齐
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>左右两端布局</title>
<style> .table {
display: table;
border: 1px solid #06c;
padding: 15px;
width: 100%;
} .table .table-left {
text-align: left;
display: table-cell
} .table .table-right {
text-align: right;
display: table-cell
} .table .table-content {
width: 100px;
height: 100px;
border: 1px solid #ccc;
text-align: center;
display: inline-block;
font-size: 40px;
line-height: 100px;
}
</style>
</head> <body>
<div class="table">
<div class="table-left">
<div class="table-content">左边</div>
</div>
<div class="table-right">
<div class="table-content">右边</div>
</div>
</div>
</body> </html>
2.居中
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>图片居中对齐</title>
<style>
* {
box-sizing: border-box;
} .table {
display: table;
border: 1px solid #06c;
padding: 5px;
max-width: 1000px;
margin: 10px auto;
width: 100%;
} .table-center {
height: 150px;
width: 100px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #4679bd;
}
</style>
</head> <body>
<div class="table">
<div class="table-center">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556086970323&di=51c11bb425e5f92ca3c9e455aad95675&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F20%2F57%2F95i58PIC6Qh_1024.jpg" width="50px" height="50px" alt="logo" />
</div>
</div>
</body> </html>
3.平均分
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>平均分</title>
<style>
* {
box-sizing: border-box;
} .table {
display: table;
border: 1px solid #000;
padding: 5px;
max-width: 1000px;
margin: 0 auto;
width: 100%;
} .table ul {
display: table;
width: 100%;
padding: 0;
border-right: 1px solid #ccc;
} .table ul li {
display: table-cell;
border: 1px solid #ccc;
text-align: center;
height: 100px;
border-right: none;
line-height: 100px;
}
</style>
</head> <body>
<div class="table">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body> </html>
