刚刚度过了实习期,进入了试用期。试用期依然会安排学习的任务。在学习中发现css的居中十分常用,做一个小小的探索。

一、水平居中

1.行内元素

可以直接使用text-align:center来解决。例如图片和文字等。

2.块级元素

2.1宽度确定的块级元素,使用margin-left:auto;和margin-right:auto;

2.2宽度不确定的块级元素:

a.用table包裹,再对table使用text-align:center。

b.将元素设置为display:inline,然后在使用textalign:center.

c.将父元素设置float:left;position:relative;left:50%;

   将子元素设置float:left;position:relative;left:-50%;

二、竖直居中

1.父元素高度不确定的文本、图片、块级元素:设置相等的上下边距。

2.父元素高度确定的单行文本:line-height设置为父元素的高度。

3.父元素高度确定的多行文本、图片、块级元素:

  a.用table嵌套,使用vertical-align:middle;

  b.设置display:table-cell;vertical-align:middle;

相关文章:

  • 2021-11-07
  • 2021-12-01
  • 2021-08-18
  • 2021-10-24
猜你喜欢
  • 2021-11-09
  • 2021-07-15
  • 2022-12-23
  • 2021-09-24
  • 2022-01-18
  • 2021-11-29
相关资源
相似解决方案