zoukankan      html  css  js  c++  java
  • 行内元素和块级元素居中

    内联元素

    水平居中

    1、行内元素居中:设置text-align:center;

    2、flex布局:设置display:flex;justify-content:center;

    垂直居中

    父元素高度是单行文本:设置height=line-height;

    父元素确定的是多行文本:a:插入table, 然后设置vertical-align:middle;

                b:先设置display:table-cell;然后设置vertical-align:middle;

    块级元素

    水平居中

    1、定宽块级元素:设置左右margin为auto

    2、不定宽块级元素:a:在元素外加入 table 标签(完整的,包括 table、tbody、tr、td),该元素写在 td 内,然后设置 margin 的值为 auto;

               b:给该元素设置display:inline;

               c:父元素设置postion:relative;子元素设置position:absolute;left:50%;

    垂直居中

    使用position:absolute

    利用display:table-cell

    css3新特性transform:translate(x,y);

    元素的垂直居中有哪些解决方案?

  • 相关阅读:
    coffee.js
    domOperation.js
    ImmediateFunc.js
    callback.js
    array.js
    asynchronous.js
    addEventListener.js
    meta的日常设置
    11.11 双十一 前端教你一键领取天猫千张优惠券 (领前先想想有没有钱花这些优惠券)
    前端的最后是逻辑和数学
  • 原文地址:https://www.cnblogs.com/WaTa/p/5936770.html
Copyright © 2011-2022 走看看