zoukankan      html  css  js  c++  java
  • css样式之vertical-align垂直居中的应用

    css样式之vertical-align垂直居中的应用:将图片垂直左右居中

    元素垂直居中
    1:必须给容器父元素加上text-align:center
    2:必须给当前元素转换成行内块元素,display:inline-block,再给当前元素加上vertical-align:middle;
    3:在当前元素的后面加上同级元素span,并对span进行vertical-align:middle;0;height:100%;display:inline-block;等设置;
    垂直对齐方式:vertical-align:top/bottom/middle;
    应用于不同图片在div当中垂直居中

    代码实例如下:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
     <style>
     *{margin:0 auto;padding:0;}
     a{text-decoration:none;}
    .box{width:600px;height:500px;border:1px solid #C06;}
    .box dl{width:198px;height:230px;border:1px solid red;float:left;}
    .box dt{width:198px;height:180px;text-align:center;}/*要给a元素的父容器加上text-align:center*/
    .box dt a{vertical-align:middle;display:inline-block;}
    .box dt span{vertical-align:middle;width:0px;height:100%;display:inline-block;}/*a标签的同级元素*/
     </style>
    </head>
    
    <body>
     <div class="box">
         <dl>
        <dt><a href="#"><img src="images/mz1.jpg"/></a><span></span></dt>
        <dd>麻花帽</dd>
        <dd>市场价:99现价:19元</dd>
        </dl>
        <dl>
        <dt><a href="#"><img src="images/mz2.jpg"/></a><span></span></dt>
        <dd>麻花帽</dd>
        <dd>市场价:99现价:19元</dd>
        </dl>
        <dl>
        <dt><a href="#"><img src="images/mz3.jpg"/></a><span></span></dt>
        <dd>麻花帽</dd>
        <dd>市场价:99现价:19元</dd>
        </dl>
     </div>
    </body>
    </html>
    图片居中
  • 相关阅读:
    算法模板——线性欧拉函数
    2818: Gcd
    1688: [Usaco2005 Open]Disease Manangement 疾病管理
    3314: [Usaco2013 Nov]Crowded Cows
    3450: Tyvj1952 Easy
    1664: [Usaco2006 Open]County Fair Events 参加节日庆祝
    1054: [HAOI2008]移动玩具
    1432: [ZJOI2009]Function
    1121: [POI2008]激光发射器SZK
    1113: [Poi2008]海报PLA
  • 原文地址:https://www.cnblogs.com/xuxiaoxia/p/6510702.html
Copyright © 2011-2022 走看看