zoukankan      html  css  js  c++  java
  • 关于div的居中的问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-01-11)

    div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果。

    1. div水平居中:设置margin的左右边距为自动。

     div2 {3     margin:0 auto;4 }

    2.   div中的元素居中

    2.1 div中的文字居中:将div的行高设置跟其高度一样的值。

     div2 {3    height:200px;4    line-height:200px;5 }

    2.2 div中的图片居中,方法一:将div的行高设置跟其高度一样的值,将其中的图片img外套上标签i,设置i和div同时垂直居中

    div 2 { 3    width: 200px; 4    height: 200px; 5    line-height: 200px; 6    vertical-align: middle; 7     8 } 9 div i10 {11    vertical-align: middle;12 }

    2.3 div中的图片居中,方法二:将div转换成tablecell,让后设置vertical-align属性居中。

    div2 {3    width: 200px;4    height: 200px;5    display: table-cell;6    vertical-align: middle;7    background-color: Gray;8 }
  • 相关阅读:
    持续集成-禅道
    nohup.out 日志切分
    Flannel 介绍及使用场景
    【Unity游戏开发】初探Unity动画优化
    fastHttp服务端处理请求的过程
    PHPExcel导出文件代码实现
    PHPExcel 1.8
    CKfinder 安装与使用
    Ckeditor的配置
    Ckeditor的使用
  • 原文地址:https://www.cnblogs.com/ferron/p/4529684.html
Copyright © 2011-2022 走看看