CSS文本样式text-align、CSS文本样式vertical-align

翩翩丫头45

于 2023-02-04 20:27:57 发布

阅读量281

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_65544554/article/details/128879844

版权

一、CSS文本样式text-align

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		p{
			width:398px;
			border:1px solid red;
		}
		label{
/*			使用户名和密码的输入框对齐，label是行内元素，所以用display: inline-block，加一个background-color辅助作用，对齐之后再屏蔽掉背景色*/
			width:70px;
			display: inline-block;
/*			background-color: red;*/
			
/*			使用户名和密码文字对齐*/
			text-align: justify;
			text-align-last: justify;
		}
	</style>
	
<body>
	<div>
		<form action="#" name="myform">
<!--			把冒号放在label标签外面，便于文字对齐-->
			<p><label>用户名</label>：<input type="text"/></p>	
			<p><label>密码</label>：<input type="text"/></p>
		</form>
	</div>
	
</body>
</html>

实例2：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		div{
			width: 90vw;
/*			为了能看到其实际位置，应用border、margin,后期定位好之后就可以把它删除了*/
/*			border: 1px solid red;*/
			margin: 100px auto;
		}
		ul{
/*			恢复div的高度*/
			overflow: hidden;
			zoom:1;
/*			ul的高度和div的高度一样*/
/*			为了能看到其实际位置，应用border、margin,后期定位好之后就可以把它删除了*/
/*			border: 1px solid blue;*/
			
/*			为ul添加两端对齐，（ul属于块级元素,但是text-align作用于行内元素，所以需要为li添加display: inline-block）*/
			text-align: justify;
			text-align-last: justify;
		}
		ul,li{
/*			去掉列表样式*/
			list-style: none;
		}
		li{
/*			将width设置为24%，表明ul多大，li就是ul的24%大小*/
			width:24%;
/*			使列表横向展示*/
/*			float: left;*/
/*			inline-block也可以使列表横向展示，所以去掉float*/
			display: inline-block;
		}
		img{
/*			将width设置为100%就可以让图片随着li大小的改变而改变*/
			width:100%;
		}
		
	</style>
	
<body>
	<div>
		<ul>
			<li><a href="#"><img src="images/5.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/6.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/7.jpg" alt="" /></a></li>
			<li><a href="#"><img src="images/9.jpg" alt="" /></a></li>
		
		
		</ul>
	</div>
	
</body>
</html>

效果：

二、CSS文本样式vertical-align

实例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		p{
			width: 398px;
			border:1px solid red;
			text-align: justify;
/*			最后将高度设置好，去掉下面的空白*/
			height: 22px;
		}
/*		添加伪类*/
		p::after{
/*			只要把  "多余一行" 变成最后一行就可以使用text-align: justify 将p中的内容变成两边对齐*/
			content: "";
/*			使用inline-block 将"多余一行"变成块状元素*/
			display: inline-block;
/*			再将其设置为100%宽就可以使"多余一行" 变成最后一行 然后将content设置为空，将"多余一行"删掉*/
			width: 100%;
		}
	
	</style>
</head>
<body>
	<p>网页划词：网页内划词新增链接的一键打开</p>
</body>
</html>

效果：