水平居中对齐在页面布局中是最为常见的一种布局方式,标题出现较多;下面我们看看常见的四种水平居中对齐方式:
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进行布局
【css设置字体上下居中 css字体居中对齐怎么做】<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>
以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!
「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助:- 更改电脑dns设置教程 怎么修改dns配置
- 微信视频号上传高清视频教程 微信发视频不压缩怎么设置
- eclipse改变界面背景 idea界面风格设置成eclipse
- ps进行色彩调整的设置 ps怎么调色彩饱和度
- 抖音作品批量设置权限 抖音怎么一键全部隐藏自己作品
- 新固态硬盘4k对齐的设置 固态硬盘怎么4k对齐分区
- html设置背景音乐自动播放 html动画效果有哪些
- 打印机无线打印的设置 打印机如何连接到wifi
- 抖音屏蔽的设置步骤讲解 抖音不看他的视频怎么设置
- 关闭修订模式的步骤 如何关闭word的修订模式设置