zoukankan      html  css  js  c++  java
  • 图片与文字在div里实现垂直水平都居中

    第一种方法,利用盒布局实现

     
    <style type="text/css">/*盒布局实现图片与文字水平垂直居中*/
       .div1{
            width: 100%;
            height:100px;
            background: yellowgreen;
            display:-moz-box;
            -moz-box-align:center;
            -moz-box-pack:center;
        }
    </style>
    
    <div class="div1">
        <img src="xmpho-tag.png" style="vertical-align: middle">
        <span>盒布局实现图片与文字水平垂直居中</span>
    </div>
    
    
    
    
    

    第二种,非盒布局实现

    <style type="text/css">
    .div2{
            width: 100%;
            height:100px;
            background: yellowgreen;
            text-align: center;
            line-height: 100px;
        }
    </style>
    
    <div class="div2">
        <img src="xmpho-tag.png" style="vertical-align: middle">
        <span>非盒布局实现图片与文字水平垂直居中</span>
    </div>

  • 相关阅读:
    05391
    05390
    05389
    05388
    1006 Sign In and Sign Out (25分)
    1002 A+B for Polynomials (25分)
    1005 Spell It Right (20分)
    1003 Emergency (25分)
    1001 A+B Format (20分)
    HDU 2962 Trucking
  • 原文地址:https://www.cnblogs.com/bm20131123/p/4746914.html
Copyright © 2011-2022 走看看