• 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;

  • 相关阅读:
    闭包概念集合
    对象的基本方法
    webpack始出来
    elasticsearch性能调优
    elasticsearch 倒排索引学习
    elasticearch 归并策略
    更加详细的Log4net的配置
    第一篇博客关于Log4net的配置记录
    js数组小结
    javascript在不同的浏览器处理事件
  • 原文地址:https://www.cnblogs.com/white-the-Alan/p/14281173.html
Copyright © 2020-2023  润新知