zoukankan      html  css  js  c++  java
  • css实现一行文字居中,多行文字左对齐

    css实现一行文字居中,多行文字左对齐

     

    问题及场景:

    当内容能一行显示在盒子内时,文字居中对齐。

    当内容过多换行后显示在盒子内时,文字左对齐。

    其实这种视觉上的需求还是蛮常见的。比如用于弹出提示框,当提示内容比较少时,内容居中显示在弹出框,提示内容比较多时,内容居左对齐。但是其纯CSS实现有点麻烦,一般就放掉这个需求,或者,使用JS实现。

    解决方案:

    CSS实现代码如下:

    复制代码
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <style>
        /*当文字为一行是,则P的宽度小于div的宽度,p标签居中显示在盒子内,文字也就居中了 ;当大于一行时,P的宽度和div的宽度是一致的 ,文字就居左对齐了*/
        .content {   200px;  border: 1px solid #ee2415;  text-align: center  ;padding: 2px 5px}
        /*display: inline-block使P的宽度根据文字的宽度伸缩 */
        .content p {  text-align: left;  display: inline-block  }
    </style>
    <body>
    <div class="content">
        <p>内容只有一行居中</p>
    </div>
    <br>
    <div class="content">
        <p>内容多行左对齐,内容多行左对齐</p>
    </div>
    </body>
    </html>
    复制代码

    效果如下

     

  • 相关阅读:
    Android文件操作说明

    d
    关于<验证码>的实现和执行流程 http://www.cnblogs.com/androidhtml5/archive/2012/05/19/2533650.html
    div 嵌套 图片
    在线FLV播放器实现方法
    转载 android webview js
    d
    d
    消息
  • 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9045703.html
Copyright © 2011-2022 走看看