15. 居中

参考文章：http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=2651552468&idx=1&sn=b6bbd09de4a3af03e4f0e0ed48364539&chksm=8025ad15b7522403a1f9105f18178b1be832d95ac11081129287e149405ff777616a94c0858e&scene=0#rd

水平居中设置

    1. 内联元素
      1. 文本、图片等内联元素


        1

        <div style="text-align:center;">我是文本,我想要居中显示</div>
    2. 块级元素
      1. 定宽
        1. 块元素 或 display:block; 且要指定宽度；


          1

          <div style="width:500px;margin:0 auto;">我是定宽块状元素，我要水平居中显示</div>
      1. 不定宽
        1. 比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。不定宽度的块状元素有三种方法居中：
          1. 加入 table 标签
            1. 为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
            2. 为这个 table 设置 margin:0 auto;（这个和定宽块状元素的方法一样），这种方式，低版本的IE可能不认识，html 第一行需要加入dtd头，如下：
                
              不过自己目前 使用  <!DOCTYPE html> 也解决了。
          2. 设置 display:inline 转 化为 内联元素
            1. 改变块级元素的 display:inline 类型，然后父级使用 text-align:center 来实现居中效果。


              1

              2

              3

              4

              5

              <div style="text-align:center;">

                  <ul style="list-style:none;margin:0;padding:0;display:inline;">

                      <li style="margin-right:8px;display:inline;"><a href="#">1</a></li>

                  </ul>

              </div>

              这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display:inline，变成了行内元素，所以少了一些功能，比如设定长度值。

          3. 设置 position:relative 和 left:50%;
            1. 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
              1. 使用 left: 450px;需配合 position 使用，否则没效果. 但是这样写，在窗口大小改变时容易变形，所以 使用      margin: 0 auto;

垂直居中

    1. 父元素高度确定的单行文本，通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码：


      1

      <div style="height:100px;line-height:100px;background:#999;">hi,imooc!</div>
    2. 父元素高度确定的多行文本
      1. 方法一：使用插入 table(包括tbody、tr、td)标签，同时设置 vertical-align：middle
        1. 说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。


          1

          2

          3

          4

          5

          <table><tbody><tr><td class="wrap">

          <div>

              <p>看我是否可以居中。</p>

          </div>

          </td></tr></tbody></table>
      2. 方法二：在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式。

        1

        2

        3

        4

        5

        6

        <div style="height:300px;display:table-cell;vartical-align:middle;">

            <div>

                <p>看我是否可以居中</p>

                <p>看我是否可以居中</p>

            </div>

        </div>

隐性改变display类型

    1. 当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：position : absolute 或者 float浮动
      元素会自动变为以 display:inline-block，      当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
      a 标签是行内元素，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。


      1

      2

      3

      <div>

          <a href="#" style="position:absolute;width:200px;background:#ccc;">进入课程</a>

      </div>

sj1

2018年5月15日 23:33:55

原文地址：https://www.cnblogs.com/lhsaq2009/p/9043592.html

时间： 2024-08-30 00:32:30

15. 居中的相关文章

HTML入门常用代码

Html 常用代码1.文件类型<HTML></HTML> (放在档案的开头与结尾)2.文件主题<TITLE></TITLE> (必须放在「文头」区块内)3.文头<HEAD></HEAD> (描述性资料,像是「主题」)4.文体<BODY></BODY> (文件本体)5.层<DIV></DIV> 6.层的对齐<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY>

字符转详细与初步了解for循环

一.整型 1.数字大小与位的关系 .bit_length #查询数字的位数的方法? 布尔值(bool)与数字之间的转换 True  False n =bool (6) 输出True? #数字和布尔值可以相互转换? int(True) 输出1 #?数字和布尔值可以相互转换?,在转换的时候,只有零是False,其余都是True #在布尔值转换成数字时True是1False是0?? #字符串与布尔值转换时只要不为空就是True 2.字符串详解 方法: .title #标题 使首字母大写?? 只要有特殊

django模板&amp;过滤器

django模板&过滤器 声明:部分信息来源这篇博客https://www.cnblogs.com/maple-shaw/articles/9333821.html MVC: 模型(model)-------->模型 视图(view)----->html 控制器(controller)--------->业务逻辑 Django框架的设计模式借鉴了MVC框架的思想,也是分成三部分,来降低各个部分之间的耦合性. Django框架的不同之处在于它拆分的三部分为:Model(模型).Te

Django模板相关内容

常用语法 {{ }} :填充变量 {% %}:模板中逻辑相关的操作. 变量 模板中的“.”有特殊用法 例句: def template_test(request): lst = [11, 22, 33] d = {"name": "alex"} class Person(object): def __init__(self, name, age): self.name = name self.age = age def dream(self): return &qu

【基础】这15种CSS居中的方式，你都用过哪几种？

简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧. 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效. *

第212天：15种CSS居中的方式，最全了

CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录吧. 1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效. 核心代码:

CSS基础布局--居中对齐，左侧定宽右侧自适应

CSS页面布局是web前端开发的最基本的技能,本文将介绍一些常见的布局方法,涉及到盒子布局,column布局,flex布局等内容.本文中,你可以看到一些水平垂直居中的方法,左侧固定宽度,右侧自适应的一些方法.如果你有更多关于布局方面的技巧,欢迎留言交流. 一.神奇的居中 经常看到有一些面试题问如何实现水平垂直居中,还要求用多种方法.唉唉唉!下面介绍一下我所知道的实现居中的方法. (1)父元素relative;子元素absolute,top:50%;left:50%;margin-left:-自己

iOS &amp; Objective-C UIScrollView 图片缩放+居中

(面前横着图形学实验的deadline 我居然搞这个.. 在将图片居中的地方坑了好久,从 NSLog 输出的内容可以看出使用 ScrollView 大概的函数调用流程 略 最后是在 (void)scrollViewDidZoom:(UIScrollView *)scrollView 函数中更新 imageView.frame.origin,就是image在scrollView里的偏移. 下面这条要靠前写,不然设置zoomScale就不会生效 self.scrollView.delegate =

iOS的UILabel设置居上对齐，居中对齐，居下对齐

在iOS中默认的UILabel中的文字在竖直方向上只能居中对齐,我从UILabel继承了一个新类,实现了居上对齐,居中对齐,居下对齐.具体如下: 1.新建一个类VerticalAlignmentLabel.h继承自UILabel 2. // //  VerticalAlignmentLabel.h //  inface // //  Created by huangzengsong on 15/5/10. //  Copyright (c) 2015年 huangzs. All rights r