zoukankan      html  css  js  c++  java
  • 大小不固定 文字图片居中

     1、透明图片+背景定位   background-position: center;

    <img src="transparent.jpg" style="background-image:url(need.jpg);">
     
     
    2、在IE下使用 font-size 使图片垂直居中显示,firefox,chrome等使用line-height 配合 img 的vertical-align
    li {float:left; 150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
    li:after{ content:''; vertical-align:middle;}
    li image{vertical-align:middle;}
     
    3、display:inline-block 和文字大小控制居中
    a{display:inline-block; 1.2em;  font-size:128px; border:1px solid blue; vertical-align:middle; text-align:center;}
    img{vertical-align:middle; border:1px solid red;}
    <a><img src="1.jpg" height="30" width="30"></a>
    hack:如果外标签不是行内元素需添加  *display: inline; zoom:1; 转化成类似 inline-block
     
    4、display:table-cell 
    div {display:table-cell; 144px; height:144px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle;}
    
    img{vertical-align:middle;}
    
    <div><img src="1.jpg" width="30" height="30"></div>
     
    5、要显示的图像后跟一个标签撑满容器,要显示的图片和该标签实现居中对齐
    span{display:inline-block; height:100%; 0; vertical-align:middle; }
    img{vertical-align:middle; }
    <div><img src="1.jpg" height="30" width="30"><span></span></div>
     
    6、该方法在IE8浏览器和Opera浏览器下是不垂直居中的
    .zxx_ul_image li{float:left; 150px; height:150px; text-align:center; line-height:150px; *font-size:125px;}
    .zxx_ul_image li:after{content:' '; vertical-align:middle;}
    .zxx_ul_image li img{vertical-align:middle;}
    
    7 浮动标签配合负值margin(垂直居中)
    <div id="floater"></div>
    <div id="content">Content here</div>
    #floater {float:left; height:50%; margin-bottom:-120px;}  这里负边距为内容高度
    #content {clear:both; height:240px; position:relative;}
    
    
    
    8 display:table + vertical-align:middle(垂直居中) 和上面的4类似
    <div id="wrapper">
       <div id="cell">
          <div class="content">Content goes here</div>
       </div>
    </div>
    #wrapper {display:table;}
    #cell {display:table-cell; vertical-align:middle;}
  • 相关阅读:
    记 · 佛系青年 · 嗯我百度了下
    【CSS】452- 浏览器解析 CSS 样式的过程
    记 · 平安夜 · 平安平安平安
    【Vuejs】451- Vue CLI 首屏优化技巧
    【网站发布】前端自习课
    【CSS】450- 温故而知我不懂的CSS
    【CSS】449- CSS第四级选择器
    RabbitDemo —— Topic
    RabbitDemo —— Fanout
    RabbitDemo —— Direct
  • 原文地址:https://www.cnblogs.com/chuangweili/p/5165968.html
Copyright © 2011-2022 走看看