zoukankan      html  css  js  c++  java
  • css水平居中(一)

    第一种方法:使用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进行设置

  • 相关阅读:
    c# webapi无法获取Session值问题解决
    深入理解java虚拟机之自动内存管理机制笔记
    数据结构总结1
    疯人院之语言、编码、计算机

    集线器/交换机
    什么是DOM?DOM和JavaScript的关系 [web开发]
    JSON轻量级的数据交换格式
    天问宇宙学第一课
    C++基础知识
  • 原文地址:https://www.cnblogs.com/yangxiaoguai132/p/5504302.html
Copyright © 2011-2022 走看看