CSS学习笔记－－基础（四）

最新推荐文章于 2024-11-12 22:56:44 发布

搬砖程序员

最新推荐文章于 2024-11-12 22:56:44 发布

阅读量872

点赞数

分类专栏： CSS笔记 HTML笔记文章标签： Html css 文本位置缩写

本文链接：https://blog.csdn.net/svendson/article/details/52085925

版权

CSS笔记同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

HTML笔记

5 篇文章 0 订阅

订阅专栏

元素的居中设置

水平居中设置－行内元素

我们实际的工作中常会遇到需要设置水平居中的场景，比如文章的标题一般都是要求水平居中显示的。

设置水平居中，我们需要分为两种情况：行内元素还是块状元素的水平居中，块状元素里面又分为定宽块状元素和不定宽块状元素。

如果设置的元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center 来实现的。如下代码：

html代码：

<span style="font-size:12px;"><body>
    <div class="textCenter"> 设置水平居中， 我们需要分为两种情况： 行内元素还是块状元素的水平居中， 块状元素里面又分为定宽块状元素和不定宽块状元素。</div>
</body></span>

css代码：

<span style="font-size:12px;"><style>
    .textCenter{
         text-align:center;
    }
</style></span>

水平居中设置－定宽块状元素

当被设置的元素为块状元素时用 text-align：center 就不再会起作用了，这时的设置就分为定宽块状元素和不定宽块状元素的设置。

满足定宽和块状两个条件的元素是可以通过设置左右margin值为auto来实现居中的。如下例子就是设置div这个块状元素水平居中：

html代码：

<span style="font-size:12px;"><body>
    <div>设置水平居中， 我们需要分为两种情况： 行内元素还是块状元素的水平居中， 块状元素里面又分为定宽块状元素和不定宽块状元素。</div>
</body></span>

css代码：

<span style="font-size:12px;"><style>
    div{
         border: 1px solid red;
         width:200px;/*定宽*/
         margin: 20px auto;/*margin-left与margin-right设置为auto*/
    }
<style></span>

也可以写成：

<span style="font-size:12px;">margin-left:auto;
margin-right:auto;</span>

注意：元素的上下margin是可以随意设置的

水平居中－不定宽块状元素方法（一）

在实际工作中我们会遇到需要为不定宽块状元素设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以不能通过设置宽度来限制它的弹性。（不定宽块状元素的宽度width是不确定的）

不确定宽度的块状元素居中显示有以下三种方法：

1.加入tabel标签

2.设置diplay：inline方法，与第一种类似，显示类型为行内元素，进行不定宽元素的属性设置

3.设置position：relative和left：50%：利用相对定位的方式，将元素向左偏移50%，即可达到居中的目的

加入tabel标签来辅助设置不定宽块状元素居中显示，是利用table标签的长度自适应－－即不定义其长度也不默认父元素body的长度（table长度根据其内容的文本长度决定），因此可以看作一个定宽块状元素，然后利用定宽块状居中的margin设置方法，使其水平居中。

加入table标签设置水平居中需要按照以下步骤进行设置：

1.为需要设置居中的元素外面加一个table标签（包括<tbody>、<tr>、<td>）

2.为这个table设置左右的margin为居中

举例如下

代码如下：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		table{
			border:1px solid red;
			margin: 0 auto;
		}
	</style>
</head>
<body>
	<div>
		<table>
			<tr>
				<td>
					<ul>
						<li>第一行文本</li>
						<li>第二行文本</li>
						<li>第三行文本</li>
					</ul>
				</td>
			</tr>
		</table>
	</div>
</body>
</html></span>

水平居中－不定宽块状元素方法（二）

改变元素的display类型为行内元素，利用其属性直接设置。，改变块状元素的display为inline类型，使用text-align:center来实现居中效果。

代码如下：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.container{
			text-align: center;
		}

		.contaiber ul{
			list-style: none;
			margin: 0;
			padding: 0;
			display: inline;
		}

		.container li{
			margin-right: 8px;
			display: inline;
		}
	</style>
</head>
<body>
	<div class="container">
		<ul>
			<li>第一行文本</li>
			<li>第二行文本</li>
			<li>第三行文本</li>
		</ul>
	</div>
</body>
</html></span>

这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的display类型改为inline，变成了行内元素，所以缺少了块状元素的某些功能，比如设定长度值。

水平居中－不定宽块状元素方法（三）

通过给父元素设置float，然后给父元素设置positon：relative和left50%，子元素设置position：relative和left：－50%来实现水平居中。

代码如下：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.container{
			float: left;
			position: relative;
			left: 50%;
		}

		.contaiber ul{
			list-style: none;
			margin: 0;
			padding: 0;
			position: relative;
			left: -50%;
		}

		.container li{
			float: left;
			margin-right: 8px;
			display: inline;
		}
	</style>
</head>
<body>
	<div class="container">
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
		</ul>
	</div>
</body>
</html></span>

垂直居中－父元素高度确定的单行文本

我们在实际开发的过程中，也会遇到许多需要垂直显示的场景，比如报纸的文章标题在左右一侧时，常常会设置为垂直居中。

垂直居中显示也分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。

父元素确定的单行文本的竖直居中的方法是通过设置父元素的height 和line-height高度一致来实现的。（height 该元素的高度， line-height 行高，指在文本中，行与行之间的基线间的距离）。

line-height与font-size的计算值之差，在css中称为行间距，分为两半，分别加到一个文本行内容的顶部和底部。

这种文字行高与块高一致有一个很大的弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。

代码如下：

<span style="font-size:12px;"><div class="container">
     hello world!
</div>

<style>
    .container{
        height:100px;
        line-height:100px;
        background:#999;
    }
</style></span>

垂直居中－父元素高度确定的多行文本（方法一）

父元素确定的多行文本、图片等的竖直居中的方法有两种：

方法一：使用插入table（包括tbody、tr、td）标签，同时设置vertical-align： middle

css中又一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有作用。

如下代码：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.wrap{
			height: 300px;
			background: #ccc;
		}
	</style>
</head>
<body>
	<table>
		<tbody>
			<tr>
				<td class="wrap">
					<div>
						<p>垂直居中显示的文本信息</p>
						<p>垂直居中显示的文本信息</p>
						<p>垂直居中显示的文本信息</p>
						<p>垂直居中显示的文本信息</p>
						<p>垂直居中显示的文本信息</p>
					</div>
				</td>
			</tr>
		</tbody>
	</table>
</body>
</html></span>

垂直居中－父元素高度确定的多行文本（方法二）

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的 display为table-cell（表格单元）, 激活vertical-align属性，但注意IE6、IE7并不支持这个样式，兼容性较差。

代码如下：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.container{
			height: 300px;
			background: #ccc;
			display: table-cell;
			vertical-align: middle;
		}
	</style>
</head>
<body>
	<div class="container">
		<div>
			<p>垂直居中显示的文本信息</p>
			<p>垂直居中显示的文本信息</p>
			<p>垂直居中显示的文本信息</p>
			<p>垂直居中显示的文本信息</p>
			<p>垂直居中显示的文本信息</p>
		</div>
	</div>				
</body>
</html></span>

这种方法的好处就是不用添加多余的无语义的标签，但缺点也是很明显的，兼容性不好。

隐性改变display类型

在html中，只要代码中出现 position:absolute 或者 float:left (float:right)之一，元素的display显示类型就会自动变为以 display: inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不沾满父元素。

如下代码：

<span style="font-size:12px;"><!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		.container a{
			position: absolute;
			width: 200px;
			background: #ccc;
		}
	</style>
</head>
<body>
	<div class="container">
		<a href="#" title="点击菜单"></a>
	</div>			
</body>
</html></span>