zoukankan      html  css  js  c++  java
  • 多行文字居中,并左端对齐

    今天遇到一个问题,就是有多行长度不同的文字,需要居中,但是还要左端对齐

    1.

    首先想到的使给每一行设置一个min-width;然后然后父元素设置text-align:center,本身设置text-align:left;

    <ul>
        <li><a>共二十个字共二十个字共二十个字共二十个字</a></li>
        <li><a>一共五个字</a></li>
        <li><a>一共十个字一共十个字</a></li>
    <li><a>共十五个字共十五个字共十五个字</a></li> </ul> ul{text-align: center;} li a{ display:inline-block; min-15em; text-align: left;}

      效果:   

    可以看到长度小于设定的min-width 15em的可以居中并左对齐,但大于15em的段落就不会左对齐了,这种方法不能使用

    2.

    然后想到的使用表格

    <table>
        <tr><td><a>共二十个字共二十个字共二十个字共二十个字</a></td></tr>
        <tr><td><a>一共五个字</a></td></tr>
        <tr><td><a>共十五个字共十五个字共十五个字</a></td></tr>
    </table>
    
    table{ margin: auto; }
    

    效果:  

    可以看到很容易就居中了,只需设置margin: auto;使整个table在页面居中就可以了

    3.

    再然后就又想到了一种方法,就是在ul外嵌套一层div,设置text-align:center,使ul居中;ul设置display:inline-blocktext-align:left;也可以实现

    效果:

    第二种和第三种还可以使单行文本居中,若过长,则第二行居左

  • 相关阅读:
    C语言I博客作业06
    C语言I博客作业07
    C语言I博客作业03
    oracle 创建用户并指定表空间
    Oracle 给用户赋予dblink权限,创建dblink
    IDEA 2020.2 破解、激活
    nginx 里的常用变量
    nginx 跨域问题解决
    elasticsearch (一)
    kubenetes 安装部署
  • 原文地址:https://www.cnblogs.com/D-not/p/5942470.html
Copyright © 2011-2022 走看看