updream 一键生成高质量推广成片 AniShort AI短剧协同制作平台 Seko AI短剧一键生成成片 Laper 剧本策划到成片协作

PHP MySQL jquery HTML CSS

CSS 教程 CSS 简介 CSS 语法 CSS Id 和 Class CSS 创建 CSS Backgrounds(背景) CSS text（文本） CSS Fonts (字体) CSS 链接（link） CSS 列表样式（ul） CSS Table(表格) CSS 盒子模型 CSS Border (边框) CSS 轮廓（outlines）属性 CSS Margin(外边距) CSS Padding（填充） CSS 分组和嵌套 CSS 尺寸 (Dimension) CSS Display(显示) CSS Positioning(定位) CSS Float(浮动) CSS Align(对齐) CSS 组合选择符 CSS 伪类 CSS 伪元素 CSS 导航栏 CSS 下拉菜单 CSS 图片廊 CSS 图像透明/不透明 CSS 图像拼合技术 CSS 媒体类型 CSS 属性选择器 CSS 总结 CSS 实例 Viewport 网格视图媒体查询图片视频(Video) 框架

CSS 教程

CSS 响应式设计

Viewport 网格视图媒体查询图片视频(Video) 框架

CSS 参考手册

CSS 在线手册

更新时间2022-04-11

CSS Float(浮动) CSS 组合选择符

CSS 水平对齐(Horizontal Align)

在CSS中，有几个属性用于元素水平对齐。

块元素对齐

块元素是一个元素，占用了全宽，前后都是换行符。

块元素的例子：

<h1>
<p>
<div>

文本对齐，请参阅 CSS文本章节。.

在这一章中，我们会告诉你块元素如何水平对齐布局。

中心对齐,使用margin属性

块元素可以把左，右页边距设置为"自动"对齐。

Note: 在IE8中使用margin:auto属性无法正常工作，除非声明 !DOCTYPE

margin属性可任意拆分为左，右页边距设置自动指定，结果都是出现居中元素：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center
{
	margin:auto;
	width:70%;
	background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="center">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
<p><b>注意: </b>使用 margin:auto无法兼容 IE8, 除非!DOCTYPE已经声明.</p>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

提示: 如果宽度是100％，对齐是没有效果的。

注意：IE5中块元素有一个margin处理BUG。为了使上述例子能工作，在IE5中，需要添加一些额外的代码。实例

使用position属性设置左，右对齐

元素对齐的方法之一是使用绝对定位：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.right
{
	position:absolute;
	right:0px;
	width:300px;
	background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

注意：绝对定位与文档流无关，所以它们可以覆盖页面上的其它元素。

使用float属性设置左，右对齐

使用float属性是对齐元素的方法之一：

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.right
{
	float:right;
	width:300px;
	background-color:#b0e0e6;
}
</style>
</head>

<body>
<div class="right">
<p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
<p>'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

使用Padding设置垂直居中对齐

CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:

我是垂直居中。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center {
    padding: 70px 0;
    border: 3px solid green;
}
</style>
</head>
<body>

<h2>垂直居中</h2>
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>

运行实例 ?

点击 "运行实例" 按钮查看在线实例

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

我是水平和垂直都居中的。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center {
    padding: 70px 0;
    border: 3px solid green;
    text-align: center;
}
</style>
</head>
<body>

<h2>Centering</h2>
<p>以下实例，我们使用 padding 和 text-align 让 div 元素的水平和垂直方向都居中:</p>

<div class="center">
  <p>我是水平和垂直都居中的。</p>
</div>

</body>
</html>

运行实例 ?

点击 "运行实例" 按钮查看在线实例

使用 line-height设置垂直居中

我是垂直居中的。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center {
    line-height: 200px;
    height: 200px;
    border: 3px solid green;
    text-align: center;
}

.center p {
    line-height: 1.5;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>

<div class="center">
  <p>我是垂直居中的。</p>
</div>

</body>
</html>

运行实例 ?

点击 "运行实例" 按钮查看在线实例

使用 position 和 transform设置垂直居中

除了使用 padding 和 line-height 属性外,我们还可以使用 transform 属性来设置垂直居中:

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
.center { 
    height: 200px;
    position: relative;
    border: 3px solid green; 
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>居中</h2>
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>

<div class="center">
  <p>我是水平和垂直居中的。</p>
</div>

<p>注意: IE8 及更早版本不支持 transform 属性。</p>

</body>
</html>

运行实例 ?

点击 "运行实例" 按钮查看在线实例

提示: 更多 transform 属性内容可以参阅 2D 翻转章节。

Crossbrowser兼容性问题

类似这样的元素对齐时，预先确定margin和元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8和早期有一个问题，当使用float属性时。如果一个容器元素（在本例中<div class="container">）指定的宽度，!DOCTYPE声明是缺失，IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用float属性时始终设置在DOCTYPE声明中！

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{
	margin:0;
	padding:0;
}
.right
{
	float:right;
	width:300px;
	background-color:#b0e0e6;
}
</style>
</head>
<body>
<div class="right">
<p><b>注意: </b>当使用浮动属性对齐,总是包括!DOCTYPE声明!如果丢失,它将会在IE浏览器产生奇怪的结果。</p>
</div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

CSS Float(浮动) CSS 组合选择符

相关视频

免费