您当前的位置:网站首页>CSS>css如何设置元素水平垂直居中显示 找CSS教程就上ki4.cc (>^ω^<),css,元素

css如何设置元素水平垂直居中显示 找CSS教程就上ki4.cc (>^ω^<),css,元素

2020年05月30日 投稿作者: 围观人数:26

“margin:0 atuo;” 是什么意思? 找CSS教程就上ki4.cc (>^ω^<)

“margin:0 atuo;”所代表的的意思是水平居中,其中的margin后面如果只有两个参数的话,第一个表示top和bottom,第二个表示left和right,再因为上下边界为0,左右则根据宽度自适应相同值,所以表达的意思是水平居中。

首先我们来介绍以下两个属性:

1、text-align是设置元素中文字的水平对齐方式。

它的作用对象是文本,控制文本,对块状元素等不起效果,只能让块元素里的内容(例如p标签内的文字:让文字在p标签内居中)相对块元素居中。

2、vertical-align是设置元素的垂直对齐方式。

它的作用对象是元素;它只能作用于内联或内联块元素。该属性相对基线去进行对齐的,介绍一下基线。

如何设置一个元素在父元素中水平垂直居中显示呢?

1、给它的父元素写text-align属性;

2、要居中的元素将其类型转为inline-block;

3、要居中的元素加vertical-align属性;

4、添加一个“标尺”,既同级元素(span等),要居中的元素与其互相垂直居中。

(视频教程推荐:css视频教程)

CSS display: contents 如何使用? 找CSS教程就上ki4.cc (>^ω^<)

display: contents 是一个比较陌生的属性,虽然属于 display 这个基本上是最常见的 CSS 属性,但是 contents 这个取值基本不会用到。

注意:

标尺须加如下属性:

display:inline-block;

width:0;(目的是隐藏标尺)

height:100%(与父元素等高,中线位置既是居中位置);

vertical-align:middle;

例如:让div1-1在div1水平垂直对齐,加上背景颜色以便区分。

<div class="div1">div1
    <div class="div1-1">div2</div><span></span>
</div>

CSS部分:

*{
    margin: 0;
    padding: 0;
}
.div1{
    width: 200px;
    height: 150px;
    background: blue;
    margin: 20px 20px;
    text-align: center;
}
.div1-1{
    width: 100px;
    height: 100px;
    background: red;
    display: inline-block;
    vertical-align: middle;
}
.div1 span{
    display: inline-block;
    width: 0px;
    height: 100%;
    background: #0681D0;
    vertical-align: middle; 
}

效果图:

推荐教程:CSS入门基础教程

以上就是css如何设置元素水平垂直居中显示的详细内容,更多请关注ki4导航其它相关文章!

css链接状态有哪些 找CSS教程就上ki4.cc (>^ω^<)

本文来自CSS入门基础教程栏目,文中为大家介绍了css链接状态的相关知识,具有一定的参考价值,希望可以帮助到大家。css链接状态有:1、a:link;2、a:visited;3、a:hover;4、a:active。

标签

版权说明
免责声明:本文文章内容由ki4导航网发布,但不代表本站的观点和立场,具体内容可自行甄别.