各種水平居中方法

2021-09-06 12:08:48 字數 346 閱讀 3376

1、text-algin:center

可以使行內元素居中、也可以使塊級元素中的文字居中,但不可以使塊級元素本身居中

2、margin:0 auto

僅可以使塊級元素居中,inline和inline-block都不可以。

3、絕對定位的居中:left:100px; right:100px;

左右同時設定相同值,元素(行內和塊級都適用)不設定寬度,元素的寬度==容器寬度減去左右設定的值。

今天學到的其它內容:

1、禁止textarea調整大小:resize:none;

2、很多高光可以使用border來實現,不需要整張截圖。border可以突破本身的含義來使用。

HTML水平居中方法

一 對於行內元素採用text align center 的方式 二 採用margin 0 auto 來實現水平居中顯示 三 用table實現 四 塊級的元素但是通過轉換成行內元素來實現塊級元素的水平居中顯示 五 父子元素都採用相對定位,父元素left 50 子元素left 50 相對自己的長度減回5...

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩,以下是大神的解釋 解釋 1 在普通內容流中,margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流,內容流中的其餘部分渲染時絕對定位部分不...

css垂直水平居中方法

1.塊級元素中的行內元素水平居中 給塊級元素設定 text align center 2.塊級元素1中的塊級元素2水平居中 1 給塊級元素2設定 margin 0 auto 2 給塊級元素2設定 display inline block 給塊級元素1中設定 text align center 1.塊...