css設定水平居中的方法:1、使用「text-align: center;」樣式,可對區塊級元素(父元素)中的行內元素進行水平居中;2、使用「margin: 0 auto;」樣式,可對區塊級元素(父元素)中具有固定寬度的區塊級元素進行水平居中。
本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。
方法1:使用text-align屬性
直接為父元素設定 text-align: center;
樣式,可以將區塊級元素(父元素)中的行內元素進行水平居中
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #father { width: 300px; height: 100px; background: palevioletred; text-align: center; } </style> <div id="father"> 我是测试文本! </div> </html>
效果圖:
說明:
display屬性設定為
inline或
inline-block的)進行水平居中
css影片教學)
方法2:使用margin屬性
為需要居中的子元素設定margin: 0 auto; 樣式,可以將區塊級元素(父元素)中具有固定寬度的區塊級元素進行水平置中。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> #father { width: 300px; height: 100px; background-color: palevioletred; } #son { width: 100px; height: 50px; background-color: pink; margin: 0 auto; } </style> <div id="father"> <div id="son">我是块级元素</div> </div> </html>效果圖:
程式設計影片! !
以上是css水平居中怎麼設定的詳細內容。更多資訊請關注PHP中文網其他相關文章!