CSS 水平居中

2024-04-27 14:31:57

字体：大中小

来源：转载

供稿：网友

CSS 水平居中一、水平居中：行内元素解决方案居中元素：文字、链接以及其它行内元素（inline或inline-*类型的元素，如inline-block，inline-table，inline-flex）解决方案：将inline元素包裹在一个display属性为block的父级元素中，如div、nav，设置父级元素属性text-align:center属性即可。HTML<div>文字元素</div><nav><ahref="">链接元素01</a><ahref="">链接元素02</a><ahref="">链接元素03</a></nav>CSSnav,div{text-align:center;}

二、水平居中：块状元素解决方案居中元素：块状元素，如div，p，section等元素，即display属性为block的元素解决方案：添加margin-left，margin-right属性值为auto即可，如：margin:0 auto;注意：需要居中的块状元素需有固定的宽度，否则无法实现居中，因为占据100%的宽度。HTML<divclass="center">水平居中的块状元素</div><pclass="center">水平居中的块状元素</p>CSSdiv,p{width:200px;/*需要设置元素的宽度值*/height:150px; color:#fff; background:#222;}.center{margin:10pxauto;}

三、水平居中：多个块状元素的解决方案居中元素：“多个块状元素”水平横向排列居中解决方案：设置这几个块状元素的display属性为inline-block，并且设置父元素的text-align属性为center即可。注意：如果要实现这几个块状元素的垂直居中，使用上一节中的margin:0 auto属性即可。HTML<divclass="center">水平居中的块状元素</div><divclass="center">水平居中的块状元素</div>

CSS

body{text-align:center;}/*页面美化元素*/div{width:100px;padding:10px;height:50px;background-color:#222;color:#fff;}.center{display:inline-block;}

四、水平居中：多个块状元素解决方案（使用flex布局实现）居中元素：多个块状元素水平横向排列居中（使用flex布局实现）解决方案：将多个块状元素的父级元素的display属性设置为flex，并设置justify-content:center即可。HTML<divclass="center">水平居中的块状元素</div><divclass="center">水平居中的块状元素</div>CSSbody{display:flex;justify-content:center;}/*页面美化元素*/div{width:100px;height:50px;color:#fff;background:#222;margin:10px;padding:10px;}

上一篇：Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形

下一篇：Fastest Wordpress Theme -wpfast Download

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注