前端开发系列（十四）CSS教程（9）

我就是我 2021-09-28 02:40 258阅读 0赞

# 一、CSS样式设置小技巧 #

## 1.1、水平居中设置-行内元素 ##

> 我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是 **水平居中** 显示的。  
> 这里我们又得分两种情况：**行内元素** 还是 **块状元素** ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？  
> 如果被设置元素为文本、图片等行内元素时，**水平居中** 是通过给父元素设置 **text-align:center** 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：`<div class="txtCenter">我想要在父容器中水平居中显示。</div>`

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>定宽块状元素水平居中</title>
    		<style>
    			div{
    				border:1px solid red;
    				margin:20px;
    			}
    			div.txtCenter{
    				text-align:center;
    			}
    			.imgCenter{
    				text-align:center;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>
    		
    		<div class="imgCenter"><img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" /></div>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]

## 1.2、水平居中设置-定宽块状元素 ##

> 当被设置元素为 **块状元素** 时用 t**ext-align：center** 就不起作用了，这时也分两种情况：**定宽块状元素** 和 **不定宽块状元素**。  
> 这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：**块状元素** 的宽度 **width** 为固定值。)  
> 满足定宽和块状两个条件的元素是可以通过设置 **“左右margin”** 值为 **“auto”** 来实现居中的。我们来看个例子就是设置 **div** 这个块状元素水平居中：

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    		<title>定宽块状元素水平居中</title>
    		<style>
    			div{
    				border:1px solid red;
    				width:200px;   /*定宽*/
    				margin:20px auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div>我是定宽块状元素，我要水平居中显示。</div>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190109201855496.png]

## 1.3、水平居中总结-不定宽块状元素方法（一） ##

> 在实际工作中我们会遇到需要为 **“不定宽度的块状元素”** 设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)  
> **不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：**  
> **1、** 加入 **table** 标签  
> **2、** 设置 **display: inline** 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置  
> **3、** 设置 **position:relative 和 left:50%**：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的  
> **这一小节我们来讲一下第一种方法：**  
> 为什么选择方法一加入 **table标签** ? 是利用 **table标签** 的长度自适应性—即不定义其长度也不默认父元素 **body** 的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>不定宽块状元素水平居中</title>
    		<style>
    			table{
    				border:1px solid;
    				margin:0 auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div>
    			<table>
    				<tbody>
    					<tr><td>
    						<ul>
    						<li>我是第一行文本</li>
    						<li>我是第二行文本</li>
    						<li>我是第三行文本</li>
    						</ul>
    					</td></tr>
    				</tbody>
    			</table>
    		</div>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190109203031857.png]

## 1.4、水平居中总结-不定宽块状元素方法（二） ##

> 除了上一节讲到的插入 **table标签**，可以使不定宽块状元素水平居中之外，本节介绍第2种实现这种效果的方法，改变元素的 **display** 类型为行内元素，利用其属性直接设置。  
> **第二种方法**：改变块级元素的 **display** 为 **inline** 类型（设置为 行内元素 显示），然后使用 **text-align:center** 来实现居中效果。如下例子：

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>不定宽块状元素水平居中</title>
    		<style>
    			.container{text-align:center;}
    			.container 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><a href="#">1</a></li>
    				<li><a href="#">2</a></li>
    				<li><a href="#">3</a></li>
    			</ul>
    		</div>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190109203307322.png]

## 1.5、水平居中总结-不定宽块状元素方法（三） ##

> 除了前两节讲到的插入table标签，以及改变元素的display类型，可以使不定宽块状元素水平居中之外，本节介绍第3种实现这种效果的方法，设置浮动和相对定位来实现。  
> **方法三：** 通过给父元素设置 **float**，然后给父元素设置 **position:relative** 和 **left:50%**，子元素设置 **position:relative** 和 **left: -50%** 来实现水平居中。  
> 我们可以这样理解：假想 **ul** 层的父层（即下面例子中的 **div** 层）中间有条平分线将 **ul** 层的父层（**div** 层）平均分为两份，**ul** 层的 **css** 代码是将 **ul** 层的最左端与 **ul** 层的父层（**div** 层）的平分线对齐；而 **li** 层的 **css** 代码则是将 **li** 层的平分线与 **ul** 层的最左端（也是 **div** 层的平分线）对齐，从而实现 **li** 层的居中。

代码示例：

<!DOCTYPE HTML>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>不定宽块状元素水平居中</title>
    		<style>
    		.container{
    			float:left;
    			position:relative;
    			left:50%
    		}
    		.container ul{
    			list-style:none;
    			margin:0;
    			padding:0;
    			position:relative;
    			left:-50%;
    		}
    		.container li{
    			float:left;
    			display:inline;
    			margin-right:8px;
    		}
    		/*下面是代码任务区*/
    		.wrap-center{
    			background:#ccc;
    		}
    		</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>
    
    	
    	<div class="wrap">
    		<div class="wrap-center">我们来学习一下这种方法。</div>
    	</div>
    	</body>
    </html>

> 运行结果：  
> ![在这里插入图片描述][20190109204020511.png]

--------------------

**此篇博客代码下载地址：[CSS教程9代码下载][CSS_9]  
博主的所有博客目录如下：[博客文章目录汇总][Link 1]  
Java面试部分的博客目录如下：[Java笔试面试目录][Java]**

> **转载请标明出处，原文地址：[https://blog.csdn.net/weixin\_41835916][https_blog.csdn.net_weixin_41835916] 如果觉得本文对您有帮助，请点击顶支持一下，您的支持是我写作最大的动力，谢谢。  
> ![这里写图片描述][70]**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgzNTkxNg_size_16_color_FFFFFF_t_70]: /images/20210923/abe71a7e1bdc4d88a7aec1347036a3b3.png
[20190109201855496.png]: /images/20210923/e1e4502ed796443bb939f6a73f0c37d4.png
[20190109203031857.png]: /images/20210923/d95a9cf8867f458db93b6e9b19a779a1.png
[20190109203307322.png]: /images/20210923/f8f19e1638e241ec94ee1a51c2e12d2b.png
[20190109204020511.png]: /images/20210923/de28e43d0bd6481fb8832a7a8bd35479.png
[CSS_9]: https://github.com/longjiahao666/Web/tree/master/Code1/css/css8
[Link 1]: https://blog.csdn.net/weixin_41835916/article/details/81879208
[Java]: https://blog.csdn.net/weixin_41835916/article/details/81413498
[https_blog.csdn.net_weixin_41835916]: https://blog.csdn.net/weixin_41835916
[70]: /images/20210923/af783ee2b1594435a8e125e7d911037f.png