300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > web居中对齐怎么设置 – CSS – 前端 无衬线字体 css写法

web居中对齐怎么设置 – CSS – 前端 无衬线字体 css写法

时间:2019-01-08 07:58:45

相关推荐

web居中对齐怎么设置 – CSS – 前端 无衬线字体 css写法

一、水平居中(text-align:center;)

这个属性在没有浮动的情况下,大家可以将块级元素转换为inline/inline-block,然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素(比如span、img、a等)直接在父元素上添加text-align:center;属性即可。

二、使用margin:0 auto;水平居中

前提:给元素设定了宽度和具有display:block;的块级元素。

让一个DIV水平居中,只要设置了DIV的宽度,然后使用margin:0 auto,css自动算出左右边距,使得DIV居中。

三、定位实现居中(需计算偏移值)

原理: 通过定位使元素左上角居中,再通过偏移值margin调整使元素中心居中。 缺点:高度宽度需事先知道。

<div>

<div></div>

</div>

.absolute_p1 {

position: relative;

width: 200px;

height: 200px;}

.absolute_p1 .absolute_c1 {

width: 100px;

height: 100px;

position: absolute; /* fixed 同理 */

left: 50%; top: 50%;

margin-left: -50px;

margin-top: -50px; /* 需根据宽高计算偏移量 */}

该方法普遍使用,但是前提必须知道元素的宽度和高度。如果当页面的宽高是动态的,比方说页面需要弹出一个DIV层必须要居中显示,DIV的内容是动态的,所以宽高也是动态的,这是可以用jquery解决居中。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。