第一种方法：使用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. MySQL随机取数据

    // 随机取9个 $rand_sql = "SELECT * FROM `tf_product` WHERE (`id` >= ((SELECT MAX(`id`) FROM `tf_ ...

  2. C# var声明变量解析

    C# var声明变量解析: 在C#3.0中提供了一种新的声明变量的方式,这就是var. 通过这个关键字,在声明变量时就无需指定类型了,变量类型是在初始化时由编译器确定的.代码如下: var ss = ...

  3. Spring3.2.9 + JdbcTemplate 事务

    XML新增声明式事务配置 <!-- 事务管理器 --> <bean id="transactionManager" class="org.springf ...

  4. linux下安装Java se和Eclipse

    首先要去下载好JDK,Java SE 8的官方网址是http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-213 ...

  5. spring MVC HandlerInterceptorAdapter

    SpringMVC 中的Interceptor 拦截器也是相当重要和相当有用的,它的主要作用是拦截用户的请求并进行相应的处理.比如通过它来进行权限验证,或者是来判断用户是否登陆,或者是像12306 那 ...

  6. SQL多表联查总结

    交叉连接:(不常用)返回两个表的笛卡尔乘积(也即全组合排列)中符合查询条件的数据行. 内连接返回连接表中符合连接条件和查询条件的数据行. 左外连接返回符合连接条件和查询条件(即:内连接)的数据行,且还 ...

  7. 导入的Android项目出现红色感叹号

    [原因]  项目中存在导入包,在项目导入之后,classpath指向的包路径出现错误,即需要重新Bulidpath [解决方式]  右键项目名称 BuildPath —> Configure B ...

  8. BZOJ5091: [Lydsy1711月赛]摘苹果

    BZOJ5091: [Lydsy1711月赛]摘苹果 https://lydsy.com/JudgeOnline/problem.php?id=5091 分析: 点\(x\)第\(1\)次选中的概率是 ...

  9. 一道SQL的面试题之联想

    一道SQL的面试题之联想 本人工作在一家小型的民营企业,主要从事业务系统的日常维护,二次开发,菜鸟一枚.周五经理准备面试两个开发人员,据简历,都还比较不错,让经理产生了想法,于是准备了一套面试题目,给 ...

  10. java中List、Map、Set、Collection、Stack、Queue等的使用

    java中这几个东西是比较常用的,虽然我用的不多,也正是因为用的不多,所以我一直搞不清楚他们之间的具体用法以及相互之间的关系,现在特单独作为一个东西来总结一下. 本文参考一下资料: 1.<jav ...