细谈text-align: center

text-align: center的几个用处

1.概括

CSS参考手册上关于text-align:center的说明是:text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。cneter参数让把文本排列到中间。单纯地看这句话你可以知道该属性可以让文本居中显示，但是除此之外，该属性还可以让父元素为块元素的行内元素或行内块元素居中显示。

2.用法

1.块级元素下使用text-align: center，使得其文本内容居中对齐

    <div class="parent"><!-- 1.块级元素下使用text-align: center，使得其文本内容居中对齐 -->123</div>

效果：

2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐

    <div class="parent"><!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 --><strong>行内元素</strong></div><div class="parent"><!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 --><em>行内元素转行内块元素</em></div>

其中这里的a元素已经通过CSS转化为行内块元素
效果：

3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐

    <div class="parent"><!-- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐--><p>hahaha</p></div>

效果：

3.详细代码(第4点为注意点)

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.parent {width: 500px;height: 150px;text-align: center;background-color: pink;border-bottom: 1px solid black;}strong {background-color: blue;}em {display: inline-block;background-color: blue;}p {width: 200px;height: 50px;background-color: blue;}</style>
</head>
<body><!-- 问题1:text-align: center的使用 --><div class="parent"><!-- 1.块级元素下使用text-align: center，使得其文本内容居中对齐 -->123</div><div class="parent"><!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 --><strong>行内元素</strong></div><div class="parent"><!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 --><em>行内元素转行内块元素</em></div><div class="parent"><!-- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，但是这个子代块级元素p会继承text-align: center，使得其文本内容居中对齐--><p>hahaha</p></div></script>
</body>
</html>

4.注意

在CSS代码中若不添加消除内外边距的代码(如下)，块元素内包含块元素会出现显示问题(如图)

        * {margin: 0;padding: 0;}

加上之后：

细谈text-align: center相关推荐

细谈Struts2 详解
(一)自己实现struts2框架 Struts最早是作为Apache Jakarta项目的组成部分,项目的创立者希望通过对该项目的研究,改进和提高JavaServer Pages .Servlet.标 ...
windows server 2003 DNS 细谈系列之（二）记录类型、数据库
windows server 2003 DNS 细谈系列之(二)记录类型.数据库<?xml:namespace prefix = o ns = "urn:schemas-microso ...
QT乱码总结4.细谈本地编码
QT乱码总结0.Qt乱码产生因素 https://blog.csdn.net/liujiayu2/article/details/103167953 QT乱码总结1.Unicode 和 UTF-8 h ...
Java程序员从笨鸟到菜鸟之（五十一）细谈Hibernate（二）开发第一个hibernate基本详解...
在上篇博客中,我们介绍了<hibernate基本概念和体系结构>,也对hibernate框架有了一个初步的了解,本文我将向大家简单介绍Hibernate的核心API调用库,并讲解一下它的基 ...
细谈getRequestDispatcher()与sendRedirect()的区别
问题?细谈getRequestDispatcher()与sendRedirect()的区别首先我们要知道: (1)request.getRequestDispatcher()是请求转发,前后页面共享 ...
三个角度细谈：如何发挥朋友圈广告的威力
加入腾讯理财通一年以来,我已经亲自操刀投过9个朋友圈广告,单次广告多则2000万,少则300万均有涉猎.此文,是我对于过去一年投放的总结与沉淀,回顾过去投放历史,沉淀做好朋友圈广告的方法.从广告主的角 ...
细谈JVM垃圾回收与部分底层实现
JVM系列文章目录初识JVM 深入理解JVM内存区域玩转JVM对象和引用 JVM分代回收机制和垃圾回收算法细谈JVM垃圾回收与部分底层实现 Class文件结构及深入字节码指令玩转类加载和类加载 ...
细谈Type-C、PD原理（上/下）
一.Type-C简介以及历史自1998年以来,USB发布至今,USB已经走过20个年头有余了.在这20年间,USB-IF组织发布N种接口状态,包括A口.B口.MINI-A.MINI-B.Micro- ...
html网页制作之细谈HTML前端项目开发过程中的细节及心得_避免入坑
细谈两类前端项目与编写过程中的技巧.心得快乐的五一小长假,由于回家路途遥远,只好自己在校编前端网页.两天多的时间编写了两种不同风格的网页,人都敲傻了,还好只涉及到了HTML和CSS,并未加入JS模块 ...
细谈网络同步在游戏历史中的发展变化（中）
非常不好意思让大家久等了,上一篇文章细谈网络同步在游戏历史中的发展变化(上)我们讨论了网络同步的基本概念以及锁步同步(帧同步)的发展历史,这篇我们继续讲述状态同步的发展历程与基本原理.本文作者依旧是网 ...