图片和span水平垂直居中

  1. <style type="text/css">
  2. .content{
  3. width:20%;
  4. height:60px;
  5. border:1px solid red;
  6. text-align:center;}
  7. span{
  8. height:100%;
  9. vertical-align:middle;
  10. line-height:60px;}
  11. img{
  12. vertical-align:middle;}
  13. </style>
  14. <div class="content">
  15. <img src="1.jpg">
  16. <span>测试一下吧</span>
  17. </div>
时间： 2024-10-24 20:46:26

图片和span水平垂直居中的相关文章

移动端重构图片文字的水平垂直居中

移动端重构的时候,常见图文居中分两种,一种是这样图片跟文字呈上下结构的 这种比较简单,在这里就不详细说了. 今天群里有人问到了另外一种的,类似这样的,图片与文字呈左右结构的,并且图文水平垂直居中 大致意思就是,图片跟文字是左右结构,图片可以根据屏幕大小变化,右边文字有可能一行,有可能多行,都要求在那个方框里面垂直居中.并且图片跟文字整体在方框里面也是水平垂直居中的.甚至那个方框的高都不是固定的. 正好自己前些天也碰到这问题,当时赶项目做得有点粗糙,今天重新写写. 上次那项目做的- -要是万一文字

table-cell实现未知宽高图片，文本水平垂直居中在div

<BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-outer"> <div class="box"> <img src="images/01.jpg" /> </div> </div> <!--box-outer--> <h1>多行文

CSS制作图片水平垂直居中 亲测推荐

空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主要使用了一张宽度为1px高度为100%的透明图片,并设置图片“vertical-align:middle”.后来我想了想,此处能不能不使用图片,直接像上面的实例一样,用一个空格的span标签,只是将其“display:inline”设置为“display:inline-block”.因为这两者的核心原理都是一

图片水平垂直居中

效果仅见:http://runjs.cn/detail/tkid13aj <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style type="text/css"> body{ margin:0; padding:0;} dl,dt,dd,img{ margin:0; paddin

HTML-img图片水平垂直居中。

<style> .box{ width:800px;height:800px;border:1px solid #000; text-align:center;}//水平居中 span{ display:inline-block; height:100%; vertical-align:middle;}//垂直居中 img{ vertical-align:middle;}//垂直居中 </style> </head> <body> <div class

转 图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示.关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法,用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是在我看

大小不固定的图片、多行文字的水平垂直居中

想必写css的都知道如何让单行文字在高度固定的容器内垂直居中,但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢?本文将会告诉你如何实现多行文字的垂直居中显示. 关于图片垂直居中显示,想必很多写css的人都研究过,或者说是搜寻过方法.淘宝团队似乎提供了一种不错的方法, 用font-size解决IE下垂直居中的问题,是个好方法吗?是的,方法是不错,可是问题也很多:不支持img外标签的浮动,致使多图片排列时需添加额 外标签:需要记住一些比例参数,上手较难:原理艰深,兼容性不稳定等.但是

CSS元素（文本、图片）水平垂直居中方法

1.text-align:center; 2.margin:0 auto; 3.display:inline-block; + text-align:center; 4.position:relative; + float:left; 5.line-height 6.上下左右padding 7.position:absolute; + margin:auto; 8.position:absolute; + 负margin 9.position:absolute; + calc() 10.tabl

如何让未知尺寸的图片、单行文本、多行文本水平垂直居中？

先看下效果图: 下面是CSS代码: <style type="text/css"> /*让未知尺寸的图片.单行文本.多行文本水平垂直居中*/ .wrap { border: 1px solid #0094ff; width: 200px; height: 200px; /*下面是实现垂直居中的关键,没有之一*/ display: table-cell; text-align: center; vertical-align: middle; } .wrap .subwrap