當前位置：
首頁 >
CSS五种水平居中：text-align margin incline-block flex relative
發(fā)布時間：2024/9/19
99
豆豆
生活随笔
收集整理的這篇文章主要介紹了
CSS五种水平居中：text-align margin incline-block flex relative
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
方法一text-align：針對于文字
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height: 300px;width: 600px;text-align: center;}P {color: red;}</style> </head> <body> <div class="box"><p>1111</p> </div> </body> </html>方法二單個塊狀元素解決方案margin左右居中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height:300px;width: 600px;text-align:center;}.box2{background-color: red;width: 20px;height: 20px;margin:0 auto;}</style> </head> <body> <div class="box"><div class="box2"></div> </div> </body> </html>方法三 多個塊狀元素 父元素設(shè)為text-align子元素設(shè)置為行內(nèi)塊元素：display：inline-block;
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height: 300px;width: 600px;text-align: center;}.box2, .box3 {background-color: red;width: 20px;height: 20px;display: inline-block;}</style> </head> <body> <div class="box"><div class="box2"></div><div class="box3"></div> </div> </body> </html>方法四多個塊狀元素 使用flex定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {background-color: green;height: 300px;width: 600px;display: flex;justify-content: center;}.box2, .box3, .box4 {background-color: red;width: 20px;height: 20px;margin-left: 10px;}</style> </head> <body> <div class="box"><div class="box2"></div><div class="box3"></div><div class="box4"></div> </div> </body> </html>方法五不確定寬度設(shè)置：使用relative進行定位
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {float: left;position: relative;left: 50%;background: #2ac7d2;}.box ul {position: relative;left: -50%;background: #7c4a03;}</style> </head> <body> <div class="box"><ul><li>111</li><li>111</li><li>111</li></ul> </div> </body> </html>https://github.com/7117/frontendCollection/tree/master/CSS
與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖總結(jié)
以上是生活随笔為你收集整理的CSS五种水平居中：text-align margin incline-block flex relative的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Kibana停止kibana的方法命令：
- 下一篇： CSS解决display:inline-