zoukankan      html  css  js  c++  java
  • 不定宽块状元素居中方法

      在实际的编写代码过程中,我们会遇到要为“不定宽块状元素”设置居中,比如网页上的分页导航,因为分页的数量不确定,所以我们不能通过设置宽度来限制它的弹性。

    不定宽的块状元素有三种方法设置居中:

    一、设置table标签:

      利用table标签的自适应长度(table其长度根据其文本内容的长度决定),因此可以看做是“定宽度块元素”,然后利用顶宽度块状元素居中的margin方法,使其水平居中。

      例1:HTML代码

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>例1</title>
     6 <link type="text/css" rel="stylesheet" href="task3-4.css">
     7 <script type="text/javascript" src="task3-4.js"> </script>
     8 </head>
     9 <body>
    10     <table>
    11             <tbody><tr><td>
    12                   <div class="parent">
    13                       <div id="page"></div>
    14                   </div>
    15              </td></tr></tbody>
    16       </table>
    17 </body>
    18 </html>

      CSS代码:(其余代码已省略,只有核心代码)

     1 table { 2 border: 0; 3 margin: 0 auto; 4 } 

      JavaScript代码也省略,最终呈现的效果图:

      

      分页码始终在白色背景块中居中,无论有多少个分页效果;

    二、将块级元素的display属性设置为inline类型(设置为行内元素)

      设置块级元素的display属性为inline类型,然后父级使用text-align:center来实现居中。

      例2:HTML代码

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>例1</title>
     6 <link type="text/css" rel="stylesheet" href="task3-4.css">
     7 <script type="text/javascript" src="task3-4.js"> </script>
     8 </head>
     9 <body>
    10       <div class="parent">
    11             <div id="page"></div>
    12       </div>
    13 </body>
    14 </html>

      CSS代码:(其余代码已省略,只有核心代码)

    1 .parent {
    2     text-align: center;  
    3 }
    4 #page {
    5     display: inline; 
    6 }

      JavaScript代码也省略,最终呈现的效果图:

      

    三、设置父元素float:

      设置父元素为float:left; position:relative; left:50%;设置子元素float:left; left:-50%;

      例3:HTML代码

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>例1</title>
     6 <link type="text/css" rel="stylesheet" href="task3-4.css">
     7 <script type="text/javascript" src="task3-4.js"> </script>
     8 </head>
     9 <body>
    10       <div class="parent">
    11              <div id="page"></div>
    12       </div>
    13 </body>
    14 </html>

      CSS代码:(其余代码已省略,只有核心代码)

     1 .parent {
     2     float: left;  
     3     position: relative; 
     4     left: 50%; 
     5 }
     6 #page {
     7     position: relative; 
     8     margin: 0px; 
     9     padding: 0px;  
    10     left: -50%;  
    11 }

      JavaScript代码也省略,最终呈现的效果图:

      

  • 相关阅读:
    JS数字指定长度不足前补零的实现
    IIS7设置将域名不带www跳转到带www上
    NET Core Mvc发布带视图文件的方法!
    NET Core 部署到 Windows服务
    Java配置----JDK开发环境搭建及环境变量配置
    Windows上MyEclipse2017 CI7 安装、破解以及配置
    C# 通过http post 请求上传图片和参数
    MongoDB中的数据导出为excel CSV 文件
    JS计算两个日期之间的天数,时间差计算
    IIS8.5 的环境下添加配置WCF服务!!!!!
  • 原文地址:https://www.cnblogs.com/Pvision/p/6021228.html
Copyright © 2011-2022 走看看