一、元素的水平居中
1、行內元素的水平居中
利用父元素設定text-align:center;
行級元素垂直居中
2、塊級元素的水平居中
利用margin: 0 auto;
塊級元素
3、浮動元素的水平居中
寬度固定的浮動元素:relative:left:50%
.outerbox
寬度不固定的浮動元素:
.outerbox
.innerbox
我是浮動的
4、絕對定位的元素水平居中 left:0和right:0不可省略
.center
二、元素的垂直居中
1、行級元素的垂直居中(height和line-height的設定)
2、塊級元素的垂直居中
父元素高度固定:父元素的height和line-height保持一致 居中元素的vertical-align:middle display:inline inline-block;
1. .center
7. .inner
父級元素高度不固定:父元素的padding-top=padding-bottom即可 如何居中正常元素 浮動元素以及絕對定位元素
1.行內元素的水平居中 父元素設定text align center style width 250px height 100px background ccc text align center 行內元素水平居中span div body 效果圖如下 2.塊級元素水平居中 margin 0 aut...
塊級元素以及行內元素居中顯示
title type text css container center style head id container id center div div body html 以上方法是我認為最好用的,不過缺點是需要知道元素的寬度和高度。通過設定需要定位的div元素為position absolu...
HTML的塊級元素以及內聯元素
html的塊級元素以及內聯元素 塊元素一般都從新行開始,它可以容納內聯元素和其他塊元素,常見塊元素是段落標籤 p form 這個塊元素比較特殊,它只能用來容納其他塊元素。如果沒有css的作用,塊元素會順序以每次另起一行的方式一直往下排。而有了css以後,我們可以改變這種html的預設布局模式,把塊元...