CSS常见的四种居中对齐方式

CSS常见的四种居中对齐方式水平居中对齐在页面布局中是最为常见的一种布局方式,标题出现较多。下面我们看看常见的四种水平居中对齐方式:1、使用margin:0auto;进行布

大家好,欢迎来到IT知识分享网。

水平居中对齐在页面布局中是最为常见的一种布局方式,标题出现较多;下面我们看看常见的四种水平居中对齐方式:

1、 使用margin:0 auto; 进行布局

<style> .content{ width:100px; height:100px; margin:0 auto; background-color:red; } </style> <div class="content"></div> 

2、使用绝对定位布局

<style> .parent{ width:400px; height:200px; border:1px solid #000; position:relative; } .child{ width:100px; height:100px; background-color:red; position:absolute; left:50%; margin-left:-50px; //50为容器宽度的一半 } </style> <div class="parent"> <div class="child"></div> </div> 

3、使用text-align:center;和inline-block进行布局

<style> .parent{ width:400px; height:200px; border:1px solid #000; text-align:center; } .child{ width:100px; height:100px; background-color:red; display:inline-block; } </style> <div class="parent"> <div class="child"></div> </div> 

4、使用table进行布局

<style> .parent{ width:400px; height:200px; border:1px solid #000; } .child{ background-color:red; display:table; margin:0 auto; } </style> <div class="parent"> <div class="child"></div> </div> 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/52581.html

(0)
上一篇 2024-08-06 17:26
下一篇 2024-08-11 14:45

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信