• 不定宽度元素居中


    1、table方法

    第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

    第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。

    2、display:inline方法

    改变块级元素的 dispaly 为 inline 类型,然后使用 text-align:center 来实现居中效果。

    style>
    .container{text-align:center;}
    .container ul{list-style:none;display:inline;}
    .container li{display:inline;}
    </style>
    </head>
    
    <body>
    <div class="container">
        <ul>
        	<li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    </body>
    

      3、float方法

    通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left:-50% 来实现水平居中。

    <style>
    .container{
        float:left;
        position:relative;
        left:50%
    }
    
    .container ul{
        list-style:none;
        margin:0;
        padding:0;
        
        position:relative;
        left:-50%;
    }
    .container li{float:left;display:inline;margin-right:8px;}
    </style>
    
    
    
    <body>
    <div class="container">
        <ul>
            <li><a href="#">1</a></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
        </ul>
    </div>
    </body>
    

      

  • 相关阅读:
    运维自动化-Ansible
    YARN 的深入简出
    HDFS 总结
    IDEA 创建HDFS项目 JAVA api
    解决 HDFS 开发 java.lang.IllegalArgumentException: java.net.UnknownHostException: hadoop000
    hadoop深入简出(二)
    大数据hadoop的伪分布式搭建
    anaconda的安装tensorflow
    switch只跟在这些之后
    jsp页面之初体验
  • 原文地址:https://www.cnblogs.com/mmlvj/p/4673848.html
Copyright © 2020-2023  润新知