好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

css怎么设置水平对齐

css设置水平对齐的方法:1、使用“text-align: center ;”样式设置文本元素水平 居中对齐 ;2、使用“m arg in: auto;”样式设置 块状元素 水平居中对齐。

本教程操作环境:windows7系统、CSS3 && HT ML 5版、Dell G3 电 脑。

1、使用 text-align: center;

text-align属性指定元素文本的水平对齐方式。

属性值:

left 把文本排列到左边。默认值:由浏览器决定。

right 把文本排列到 右边 。

center 把文本排列到中间。

justify 实现两端对齐文本效果。

示例:

<!DOCTY PE  html>
<html>
	<head>
		< ;m eta charset="utf-8">
		<style>
			.center {
				text-align: center;
				border: 3px solid green;
			}
		</style>
	</head>

	<body>

		<h2>文本居中对齐</h2>

		<div class="center">
			<p>文本居中对齐。</p>
		</div>

	</body>

</html>@H_ 512 _44@

效果图:

【推荐教程:CSS视频教程 】

2、使用 mar gin : auto;

margin简写属性在一个声明中设置所有 外边距 属性。

属性值:

auto 浏览器计算外 边距 。

length 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。

% 规定基于父元素的 宽 度的百分比的外边距。

要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。

设置到元素的宽度将 防 止它溢出到容器的边缘。

元素通过指定宽度,并将两边的空外边距平均分配

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.center {
				margin: auto;
				width: 60%;
				border: 3px solid  # 73AD21;
				padding: 10px;
			}
		</style>
	</head>

	<body>

		<h2>元素居中对齐</h2>

		<div class="center">
			<p>div 元素是居中的</p>
		</div>

	</body>

</html>

效果图:

更多编程相关知识,请访问:编程视频!!

以上就是css怎么设置水平对齐的详细内容,更多请关注其它相关 文章 !

总结

以上是 为你收集整理的 css怎么设置水平对齐 全部内容,希望文章能够帮你解决 css怎么设置水平对齐 所遇到的问题。

如果觉得 网站内容还不错, 推荐好友。

查看更多关于css怎么设置水平对齐的详细内容...

  阅读:19次