CSS 2017-07-26

最新推荐文章于 2022-03-02 14:35:33 发布

CasvotLee

最新推荐文章于 2022-03-02 14:35:33 发布

阅读量160

点赞数

本文链接：https://blog.csdn.net/ledgewont/article/details/76150167

版权

1. 水平居中设置-定宽块状元素

text-align只对文本有效，使用margin：调整边缘距可以实现对定宽的块状元素的移动，实现居中显示等等。

2. 水平居中设置- 变宽（width不固定）块状元素

①使用table标签，利用table标签的自适应性。（margin:auto）

注：margin:0 auto; ，这个就表示上下的距离值是0，而左右就是自动适应，也就是我们常说的自动居中。
而margin:auto; ，就表示上下左右都自动适应。

②使用display：inline 将块状元素变为内联元素并居中，而且可以改变其个边距了。

实例：

<style>
.container{text-align:center;}                                                               
.container ul{list-style:none;margin:0;padding:0;display:inline;}               /* margin:0;padding:0（消除文本与div边框之间的间隙）*/.container li{margin-right:8px;display:inline;}


/* margin-right:8px（设置li文本之间的间隔）*/
</style><body><div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul></div></body>


③设置浮动和相对位置来实现居中
使用
float：left；
position：relative；
left：50%；   

<div class="wrap">
    <div class="wrap-center">我们来学习一下这种方法。</div>
</div>

	
<style>
	.wrap{float:left; border:3px solid red;
	      left:50%;   
	        position:relative;         }
	.wrap-center{float:left;   border:3px solid blue;
	               position:relative;  left:-50%;            }
	</style>











3.  CSS 

垂直居中-父元素高度确定的单行文本


<style>

.wrap h2{
    margin:0;
    height:100px;
   text-align:center;      
	line-height: 100px;
    background:#A5B0CF;
}
</style>








4. CSS-垂直居中-父元素高度确定的多行文本
vertical-align: middle;



#girl{ height:300px;vertical-align: middle;display:table-cell;}













5.  CSS-隐性改变display类型
改变块元素的高宽度。