兼容性：不兼容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>
