zoukankan      html  css  js  c++  java
  • css 实现居中的几种方式

    文字居中 1 固定容器高度的单行文本垂直居中:height=line-height

                 2 未知容器高度的文本垂直居中:设定padding,使上下的padding值相同即可

                   3 固定容器高度的多行文本垂直居中:让<div>模拟<table>使用vertical-algin 

          父容器 #wrap{

                  display:table

                }

          子容器 #content{

                 vertical-algin:middle;

                  display:table-cell;

                }


    图片居中 垂直居中一张图片 vertical-align:middle;

    1 html:<div id="parent">
          <div id="child">Content here</div>
          </div>
    css :
    #parent {position: relative;}
    #child {
    position: absolute;top: 50%;left: 50%;height: 30%;width: 50%;
    margin: -15% 0 0 -25%;
    }

    2 html:<div id="parent">
    <div id="child">Content here</div>
    </div>
    css:#parent {padding: 5% 0;}
    #child {padding: 10% 0;}
    
    

     元素高宽已知.#parent{600px;height:400px;position:absolute;left:50%;top:50%;margin-top:-200px;margin-left:-300px;}
     元素高宽未知(使用css3的属性,会出现兼容问题)#parent{ 600px;height:400px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)
    }

  • 相关阅读:
    关于checkbox的一篇博客
    如何快速学习
    for循环下的取值问题
    vue的自动更新原理
    关于word-wrap的用法;
    2016年百度面试题
    编写代码的原则
    null和defined的区别
    js的模块化加载
    springmvc注解
  • 原文地址:https://www.cnblogs.com/cy1121/p/5885657.html
Copyright © 2011-2022 走看看