您现在的位置是: 首页 » 网页代码 » CSS如何设置对齐方式?
网页代码

CSS如何设置对齐方式?

网站优化小编十一月 24, 2019 17人已围观

在CSS中,我们可以使用各种方法和技术来使对齐项目,例可以水平和垂直对齐项目。下面本篇文章就来给大家介绍一些使用CSS对齐项目的方法,希望对大家有所帮助。

网站运营中栏目排名优化技巧

1、margin : auto ;

此属性用于将块元素水平对齐到中心。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.box{
				width: 100%;
				height: 150px;
				border: 3px solid #73AD21;
			}
			.center {
				margin: auto;
				width: 60%;
				border: 3px solid #73AD21;
				padding: 10px;
			}
		</style>
	</head>

	<body>
		<div class="box">
			<h2>元素居中对齐</h2>

			<div class="center">
				这是一个div元素,在这个元素上,margin:auto用于将其水平对齐到中心。
			</div>
		</div>
	</body>
</html>

注意:使用margin : auto在IE8中不起作用,除非声明了!DOCTYPE

效果图:

网站运营中栏目排名优化技巧

2、position: absolute;

我们可以使用position: absolute;来对齐项目。

示例:

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<style>
		.box{
		   width: 100%;
		   height: 150px;
		   border: 3px solid #73AD21;
		}
		.right { 
	            position: absolute; 
	            right: 0px; 
	            width: 300px; 
	            border: 3px solid #73AD21; 
	            padding: 10px; 
	        }
	</style>
	</head>

	<body>
		<div class="box">
			<h2>右对齐</h2> 
  
		    <div class="right"> 
		        <p>绝对定位元素可以与其他元素重叠。</p> 
		    </div>
		</div>
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

3、text-align: center;

我们可以在各种标签中使用text-align: center;它可以将任何用HTML编写的文本对齐。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.box{
				width: 100%;
				height: 200px;
				border: 3px solid #73AD21;
			}
			.center { 
	            text-align: center; 
	            border: 3px solid green; 
	        }
		</style>
	</head>

	<body>
		<div class="box">
			<h1 style="color:green; text-align: center;">Hello World!</h1> 
		    <h2>两个文本都在中间</h2> 
		  
		    <div class="center"> 
		        <p>这是一个居中文本!</p> 
		    </div>
		</div>
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

4、line-height属性

想要垂直对齐项目,我们可以使用line-height属性。line-height 属性设置行间的距离(行高)。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.center { 
				width: 60%;
				height: 150px;
	            border: 3px solid green; 
	            line-height: 150px;
	        }
		</style>
	</head>

	<body>  
	    <div class="center">一段垂直居中的文本!</div> 
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

5、padding和text-align属性

我们可以使用padding属性和text-align : center的组合来垂直和水平对齐文本。

示例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<style>
			.center { 
            padding: 70px 0; 
            border: 3px solid green; 
            text-align: center; 
        }
		</style>
	</head>

	<body>  
	    <p>使用padding和text-align将div元素里的内容垂直和水平居中:</p> 
  
	    <div class="center"> 
	        <p>这是一段垂直水平居中的文本。</p> 
	    </div>
	</body>
</html>

效果图:

网站运营中栏目排名优化技巧

相关文章

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:227天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3199 条
  • 文章评论:21 条
  • 微信公众号:扫描二维码,关注我们