第一种方法：使用text-align属性。

看到一篇博客，也不知道是不是我理解的问题，博客上说text-align可以是内联元素水平居中，我感觉这样的说法是不是有些不准确。

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

text-align属性使内联元素属性居中，这样直观的说法给我最初的直观思路是这样的

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

       p{

        /* text-align: center; */

        background-color: yellow;

       }

       span{

        text-align: center;

        background-color: red;

       }

  </style>

</head>

<body>

  <p><span>11111111111</span></p>

</body>

</html>

在chrome浏览器下的效果是这样的：

其并没有实现水平居中的效果。

如果将代码改成如下所示：

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

       p{

        text-align: center;

        background-color: yellow;

       }

       span{

        /* text-align: center; */

        background-color: red;

       }

  </style>

</head>

<body>

  <p><span>11111111111</span></p>

</body>

</html>

实现的效果如下：

水平居中的效果实现了。

根据text-align属性的定义，确实实现了p元素内的文字的居中显示。

如果把span拿掉会怎么样呢？

<!doctype html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <style type="text/css">

       p{

        text-align: center;

        background-color: yellow;

       }

  </style>

</head>

<body>

  <p>11111111111</p>

</body>

</html>

效果如下：

同样能够实现文字居中的效果。

当然块级元素水平居中则可以用margin:0 auto进行设置

css水平居中（一）的更多相关文章

  1. css水平居中那点事

    昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...

  2. CSS水平居中

    三种情况:1.行内元素(文本.图片等) 给父元素设置text-align:center;来实现 2.定宽块状元素 <style> div{ border:1px solid blue; w ...

  3. css水平居中，竖直居中技巧（二）

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  4. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  5. css水平居中的各种方法

    说到水平居中,大家可能觉得很简单啊,text-align:center 就OK了. 但是,有时候会发现这样写了也没出效果.原因是什么呢?  请往下看. 水平居中:分为块级元素居中和行元素居中 行内元素 ...

  6. CSS水平居中/垂直居中的N个方法

    我看最近微博流行CSS居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:"茴香豆的回字有四种写法",万一哪天有个面试官问你:&q ...

  7. CSS水平居中和垂直居中解决方案

    一.CSS 居中 — 水平居中 DIV等标签本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align: center,然后嵌套一层DIV来解决问题. 可是这个方法有时候完全不起作 ...

  8. CSS 水平居中

    一.水平居中:行内元素解决方案 居中元素:文字.链接以及其它行内元素(inline或inline-*类型的元素,如inline-block,inline-table,inline-flex)解决方案: ...

  9. CSS 水平居中/布局 垂直居中 （月经问题）

    水平居中 如果它是一个行内元素 对其父元素使用 text-align:center 即可实现. <p style = " text-align:center; width:300px; ...

  10. CSS 水平居中与垂直居中

    前言 在CSS布局中,水平居中与垂直居中一直是用到比较多的,在本篇中将介绍水平居中.垂直居中的几种方式. 示例 HTML: <div class="parent"> & ...

随机推荐

  1. 工程优化方法中的“最速下降法”和“DFP拟牛顿法”的 C 语言实现

    这个小程序是研一上学期的“工程优化”课程的大作业.其实这题本可以用 MATLAB 实现,但是我为了锻炼自己薄弱的编码能力,改为用 C 语言实现.这样,就得自己实现矩阵的运算(加减乘除.求逆.拷贝):难 ...

  2. 180. Consecutive Numbers

    问题描述 解决方案 select distinct l1.Num as ConsecutiveNums from Logs l1,Logs l2,Logs l3 where l1.Id+1=l2.Id ...

  3. selenium webdriver如何添加cookie

    一. webdriver中常用的cookie方法 webdriver中提供了操作cookie的相关方法: get_cookies()                  获得cookie信息 add_c ...

  4. web自动化：元素定位(二)

    一. 实例 如何定位到下图第二个"抢投标",有一种方法是利用xpath定位 //a[@href="/loan/loan_detail/Id/7190.html" ...

  5. MySQL 约束和数据库设计

    1.MySQL 约束: 1.约束的概念: 约束是一种限制,它通过对表的行或列的数据做出限制,来确保表的数据的完整性.唯一性. MySQL中,常用的几种约束: 约束类型: 非空 主键 唯一 外键 默认值 ...

  6. centos下 yum安装ngix

    1.CentOS 6,先执行:rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-centos-6-0.el6. ...

  7. [Unity3D]EZGUI 操作简单介绍

    官方的GUI根本无法跟EZGUI比,无论是资源还是易用性还是速度.EZGUI基于Mesh不占DrawCall.EZGUI是自动合并Mesh成为一个物体,并且贴图自动制作Atlas.所以效率高,CPU消 ...

  8. MySql数据库约束

    <MySQL技术内幕:InnoDB存储引擎>本书从源代码的角度深度解析了InnoDB的体系结构.实现原理.工作机制,并给出了大量实践,本着将书读薄的思想,循序渐进的记录对本书学习的读书笔记 ...

  9. yum search/intall, Error: xz compression not available

    转自:http://blog.hexu.org/archives/2060.shtml 遇到这个问题情景: 下午第一台系统是Centos7, 安装配置完成后,接着一台是Centos 6 系统,由于疏忽 ...

  10. 1117. Eddington Number(25)

    British astronomer Eddington liked to ride a bike. It is said that in order to show off his skill, h ...