html中如何将元素居中

请注意,本文编写于 195 天前,最后修改于 194 天前,其中某些信息可能已经过时。

(这是以前写的一篇文章,以前那个虚拟空间炸了)
说实话,在最近的学习过程中,遇到将元素居中的例子实在是太多了,于是我就结合网上的内容,将这部分总结下来。

一、将需要进行水平居中的元素分类:

  • 行内元素(不定宽)。
  • 定宽块元素。
  • 不定宽块元素。

二、基本居中方式。

1.行内元素,例如将文字居中:

text-align:center

2.定宽块元素:

margin: 0 auto

可以让块元素在父元素内水平居中。

3.不定块元素居中方法。

1:子元素用绝对定位,left:50%,再加上margin-left:-本身宽度的一半。这样就消除了自身的影响。

1 #banner .tab{
2 width: 90px;
3 height: 14px;
4 position: absolute;
5 left: 50%;
6 margin-left: -45px;
7 bottom: 10px;
8 /*background-color: #fff;*/
9 }

2:设置块级元素的display属性为inline类型,然后父级使用text-align:center来实现居中。

1 .parent {
2 text-align: center; 
3 }
4 #page {
5 display: inline; 
6 }

3:从网上看到的设置table标签。利用table标签的自适应长度(table其长度根据其文本内容的长度决定),因此可以看做是“定宽度块元素”,然后利用顶宽度块状元素居中的margin方法,使其水平居中。

HTML代码:

1 <body>
2 <table>
3 <tbody><tr><td>
4 <div class="parent">
5 <div id="page"></div>
6 </div>
7 </td></tr></tbody>
8 </table>
9 </body>

css代码:

1 table { border: 0; 
2 margin: 0 auto;
3 }

4:flex弹性盒模型,这是我以前看视频记录的一种方法。

1 display:flex /*开启盒模型*/
2 justfy-content:center;/*主轴(横轴)方向对齐方式 居中*/
3 align-items:center;/*辅轴方向对齐方式 居中*/

好了,使元素居中的方法肯定不止这么些,以后如果知道还会继续更新。

幸好我懂一些Markdown的语法,要不然写出来的博客难看死了。

Comments

添加新评论