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

最新推荐文章于 2022-07-08 14:49:17 发布

Alan杨亮

最新推荐文章于 2022-07-08 14:49:17 发布

阅读量1.2k

点赞数

分类专栏：知识点-待整理（旧版）

本文链接：https://blog.csdn.net/MathYounG/article/details/79521991

版权

知识点-待整理（旧版）专栏收录该内容

37 篇文章 0 订阅

订阅专栏

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

一居中及对齐

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;字与字之间间隙

Alan杨亮

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
文本对齐居中及浮动的几个注意点和方法

文本居中以及背景图片设置的几个方法：一居中及对齐1.margin设置区块元素水平居中margin:0 auto;设置左右外边距的大小，控制元素的水平居中。&lt;style&gt; .center{ margin: 20px auto; width: 600px; border: 3px sol...
复制链接

扫一扫