zoukankan      html  css  js  c++  java
  • 实现子元素相对于父元素左右居中

    1. 显示的设定子元素的宽度,然后将资源的margin值设定为:margin:0 auto;

    html:

    <div class="parent">
      <div class="child"></div>
    </div>
    

    css:

    .parent {
    	100px;
    	height:100px;
    	background:red;
        // 这样将使得 parent 的子元素相对于 parent 左右居中,
        // text-align: 属性将居中元素体内的行内元素(text-align:主要是设置元素的文本为左右居中方式,当把元素体内的其他元素显示为行内元素的时候将使得元素相对于父级元素左右居中
         text-aligin:center; } .child { /*如果设定为绝对定位,会不起效 * 原因是设定为觉得定位后,元素的位置会相对于 *向上回溯第一个定位为:absolute/relative *的父级元素定位 */ /*position: absolute;*/ margin:0 auto; 50px; height:100px; background:green; }

    2. 使用 display:inline-block;vertilce-aligin:middle 居中元素;

    html 结构如下:

    <div class="container parent">
    	<div class="child child1">1</div>
    	<div class="child child2">2</div>
    	<div class="child child3">3</div>
    	<div class="child child4">4</div>
    	<div class="child child5">5</div>
    </div>
    

    css 代码如下:

      

    .parent {
    		height:400px;
    		background:#000;
    		text-align:center;
    	}
         // 设置 after 伪元素让元素高度为 100%;居中方式 verticle-align:middle;这样能让行内元素相对于父级元素上下居中 .parent:after { display:inline-block; vertical-align:middle; content:'.'; height:100%; }
        // child 元素将相对于 after 伪元素撑开的范围上下居中 .child { display:inline-block; position:relative; 15%; line-height:100%; vertical-align:middle; border:1px solid #e0e; text-align:center; font-size:100px; color:#fff; } .child1 { height:100px; background:#234; } .child2 { height:200px; background:#456; } .child3 { height:300px; background:#901; } .child4 { height:320px; background:#128; } .child5 { height:250px; background:#178; }

      

  • 相关阅读:
    洛谷 P1278 单词游戏 【状压dp】
    洛谷 P1854 花店橱窗布置 【dp】
    洛谷 P2258 子矩阵
    洛谷 P3102 [USACO14FEB]秘密代码Secret Code 【区间dp】
    洛谷U14200 Changing 题解 【杨辉三角】
    洛谷P3933 Chtholly Nota Seniorious 【二分 + 贪心 + 矩阵旋转】
    P3932 浮游大陆的68号岛 【线段树】
    洛谷P1273 有线电视网 【树上分组背包】
    NOI2013 矩阵游戏 【数论】
    洛谷P1268 树的重量 【构造 + 枚举】
  • 原文地址:https://www.cnblogs.com/alicePanZ/p/4404345.html
Copyright © 2011-2022 走看看