您的位置：首页 > 其它

文本对齐居中及浮动的几个注意点和方法

2018-03-11 23:54 316 查看

文本居中以及背景图片设置的几个方法：
一居中及对齐

1.margin设置区块元素水平居中

margin:0 auto;设置左右外边距的大小，控制元素的水平居中。

<style>
.center{
margin: 20px auto;
width: 600px;
border: 3px solid green;
text-align: center;
}
</style>
<body>
<div class="center">
<p>使用margin进行元素的居中</p>
</div>
</body>

注：width不能设置为100%，是没有效果的。

2.position属性设置元素的左右对齐

<style>
.right{
position: absolute;
right: 0;
width: 300px;
border: 3px solid pink;
padding: 10px;
z-index: 0;
}
<style>
<body>
<div class="right">
<p>我是右对齐的区块</p>
</div>
</body>
</html>

3.float属性设置左右对齐

<style>
.right1{
float: right;
width: 300px;
border: 3px solid purple;
padding: 10px;
}
</head>
<body>
<div class="right1">
<p>我是浮动右对齐的区块</p>
</div>
</body>
</html>

4.padding属性设置水平垂直居中

<style>
.padCenter{
padding: 70px 0;
border: 3px dotted yellow;
text-align: center;
}
</style>
<body>
<div class="padCenter">
<p>我是用padding垂直居中的元素</p>
</div>
</body>
</html>

5.line-height属性设置水平垂直居中

<style>
.lineCenter{
line-height:300px;
border: 3px solid #33ff33 ;
height: 300px;
}
</style>
<body>
<div class="lineCenter">
<p>我是利用行高进行水平居中的元素</p>
</div>
</body>
</html>

6.绝对定位和transform属性设置水平垂直居中

<style>
.poCenter{
border: 3px solid #ff88c2;
height: 200px;
position: relative;
}
.poCenter p{
position: absolute;
top: 50%;
left: 50%;
/*对水平垂直居中进行修正*/
transform:translate(-50%,-50%);
}
</style>
<body>
<div class="poCenter">
<p>我是利用绝对定位进行水平垂直居中的元素</p>
</div>
</body>
</html>

浮动的注意点：坍塌问题
1 .在最后一个div中加入样式<div style="clear:none"></div>清除浮动
2. bfc 在父级元素添加float：left/right等加强边框
3. .clear{contain"";display:block;说明此区域为块状height：0；visibility：hidden；clear：both；}
二背景图片设置
background-img：url（）；
background-repeat：no-repeat；/repeat-x/repeat-y
background-position：50% 50%；图片垂直居中
background-size：cover；//图片被包裹最适合
background：transparent；//图片透明
background-attackment:fixed;//图片固定

文本设置
Text-align:center          文本居中
Text-align:justify          文本左右对齐
Text-indent:                第一行缩进
Text-transform:capitalize   字母首个大写
Text-decoration:none      超链接字体去掉下划线
Text-decoration:line-through 横穿字体线
word-spacing:1px;词与词之间间隙
letter-spacing:1px;字与字之间间隙

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航