CSS行內元素和塊級元素的水平居中實例解析

近年來網站如雨後春筍般大批的出現在網絡上,對於網站來說web後端開發也變得越來越重要。下面就讓我們來了解一下CSS行內元素和塊級元素的水平居中實例。

水平居中

行內元素和塊級元素不同,對於行內元素,只需在父元素中設置text-align=center即可;

對於塊級元素有以下幾種居中方式:

1.將元素放置在table中,再將table的margin-left和margin-right設置成auto,將table居中,使在其之中的塊級元素葉居中,但是這種方式不符合語義化標簽的規范;

2.將塊級元素轉換行內元素(通過設置display:inline)後再居中.這種方式使居中元素變成行內元素而致使無法設置寬高;

3.設置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相對布局的方式居中.上面三種方式各有優劣,依使用情景具體選擇.

以上就是精品為您准備的關於CSS行內元素和塊級元素的水平居中實例的信息，希望對您的生活工作有幫助，祝您生活愉快。