zoukankan      html  css  js  c++  java
  • CSS--文字图片水平垂直居中

    一、首先要了解行内元素和块级元素在居中时是不一样的,常用的行内元素(内联元素)有a标签,b粗体,br换行,em强调,font设置字体,i斜体,img图片,input输入,span常用内敛容器,label表格标签,strong强调,strike中划线等;常用块级元素有div,dl与dt,dd搭配使用的块级元素,form表单,ol非排序,ul排序表单,h1标题,hr水平分割线等,其次行内元素和块级元素之间可以通过display相互转化的

    二、居中方法

    1、块级元素文字水平居中,text-align使得文字或图片在水平方向居中,注意:在div中设置的text-align不仅可以在此div种的文字和图片居中而且还可以让子div中的图片或文字在子div中居中,这个地方注意哦,是子div中的文字是相对于子div居中

     2、块级元素文字垂直居中(块级元素高度确定的情况),将块级元素的height与line-height相同即可

    3、块级元素文字水平居中(块级元素高度不确定的情况),设置padding-top、padding-bottom

    4、块级元素自身的居中(确定了宽度的块)设置margin:0 auto 这会使得这个块级元素在它的父元素中上下左右都会居中,水平居中的话设置margin-left:auto;margin-right:auto

    5、块级元素自身的居中(不确定宽度的块)如果不确定宽度的块此时这个块及时浏览器窗口的宽度,不必要设置水平居中。

    6、<td><tr>居中:vertical-align:middle;使得文字或者图片紧靠他们的父元素进行居中的

    7、行内元素的垂直居中:设置display:table-cell;vertical-align:middle;

  • 相关阅读:
    jquery封装的时间轴
    openlayers实现多图显示
    wms常用操作
    教你如何拔取百度地图POI兴趣点
    北京市地铁线路及站点数据
    Arcgis for js实现北京地铁的展示
    Openlayers 2.X加载高德地图
    Arcgis for js加载百度地图
    常用公共服务接口与java调用实现
    Openlayers 2.X加载天地图
  • 原文地址:https://www.cnblogs.com/white-the-Alan/p/14281173.html
Copyright © 2011-2022 走看看