zoukankan      html  css  js  c++  java
  • 水平居中总结-不定宽块状元素方法(一)

    在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素:块状元素的宽度width不固定。)

    不定宽度的块状元素有三种方法居中(这三种方法目前使用的都很多):

    1. 加入 table 标签
    2. 设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
    3. 设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的

    这一小节我们来讲一下第一种方法:

    为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。

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

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

    举例如下:

    html代码:

    <div>
     <table>
      <tbody>
        <tr><td>
        <ul>
            <li>我是第一行文本</li>
            <li>我是第二行文本</li>
            <li>我是第三行文本</li>
        </ul>
        </td></tr>
      </tbody>
     </table>
    </div>
    css代码:
    <style>
    table{
        border:1px solid;
        margin:0 auto;
    }
    </style>
    

      

  • 相关阅读:
    office365离线安装
    c#使用emit方法DB,实体相互转换
    c#采用emit将DataTable转List
    c#将List转换成DataTable
    c#将List转换成DataTable(采用Emit)
    聊聊编程开发的数据库批量插入(sql)
    c#随便聊聊数据库操作
    c#聊聊文件数据库kv
    WPF几个样式
    c#(IronPython)调用Python方法
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5558747.html
Copyright © 2011-2022 走看看