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;

  • 相关阅读:
    Java导出Excel(附完整源码)
    Scala语言学习笔记——方法、函数及异常
    python时间序列按频率生成日期
    socket主要函数介绍
    JAVA版CORBA程序
    Linux文件压缩命令笔记
    使用JAVA写一个简单的日历
    Node.js 文件系统
    Node.js 常用工具util
    Node.js 全局对象
  • 原文地址:https://www.cnblogs.com/white-the-Alan/p/14281173.html
Copyright © 2011-2022 走看看