tft每日頭條

 > 圖文

 > 盒子垂直居右的幾個方法

盒子垂直居右的幾個方法

圖文 更新时间:2024-07-03 02:34:17

方法一:利用定位(常用方法,推薦)

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)1

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)2

方法二:利用 margin:auto;

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)3

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)4

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)5

方法三:利用 display:table-cell

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)6

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)7

方法四:利用 display:flex;設置垂直水平都居中

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)8

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)9

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)10

方法五:計算父盒子與子盒子的空間距離(這跟方法一是一個道理)

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)11

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)12

方法六:利用 transform

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)13

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)14

盒子垂直居右的幾個方法(如何使一個盒子水平垂直居中)15

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关圖文资讯推荐

热门圖文资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved