css 图片文字垂直居中
先来看张图片
相信很多css新手遇到过这种问题，就是当图片和文本显示在一行的时候，效果很奇葩，文字和图片没法对齐，
这时我们需要做的是：
1，先给块级元素设置 display: inline-block; （行内的块级元素）
2，给图片设置高度，文本盒子不设置高度
3，给图片和文本都设置 vertical-align: middle;
4，搞定，看效果吧
顺便贴一下示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片文字垂直居中</title>
<style type="text/css">
img{
width: 100px;
height: 60px;
vertical-align: middle;
}
div{
vertical-align: middle;
display: inline-block;
}
</style>
</head>
<body>
<img src="img/pic.jpg"/>
<div>纵然只有倒下才是终点，我只有未来没有从前。</div>
</body>
</html>
css 图片文字垂直居中的更多相关文章
- UIButton 设置图片文字垂直居中排列
#pragma mark 按钮图片文字垂直居中排列 -(void)setButtonContentCenter:(UIButton *)button { CGSize imgViewSize,titl ...
- css图片+文字浮动（文字包围效果）
css图片+文字浮动(文字包围效果): 在网页中,我们有时想实现这个效果,但是 <div id="test"> <img src="gdimages/0 ...
- css之line-height及图片文字垂直居中
css虽然没有算法,但还是很神奇的,踩到坑都不知道到底是哪里?看到张鑫旭大佬的博客讲的超级好https://www.zhangxinxu.com 行高line-height用到的频率极高,指一行文字的 ...
- css解决文字垂直居中
参考链接: http://www.cnblogs.com/lufy/archive/2012/09/12/2681972.html http://zhidao.baidu.com/question ...
- css图片文字
1.浏览器是把 html 和 css 一起下载并执行的,计算机里把两件事情同时做 异步加载.计算机中的同步异步和我们生活中的正好是相反的. 补充: 同步,是所有的操作都做完,才返回给用户结果.即写完 ...
- css图片上下垂直居中
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 图片文字居中
1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...
- css 图片文字对齐
默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐 解决办法:在css中设置图片的vertical-align属性, <img src="" s ...
- CSS图片水平垂直居中
Html: <div id="></img></div> </div> CSS: #MainContent { display:table-c ...
随机推荐
- qt designer设置界面是label中文字与文本框对齐设置
往往在使用 qt designer布置界面时,添加的label和文本框中是直接从工具箱中拖进去的,由于每个控件尺寸大小不一,就会造成label中的文字相对于文本框比较较偏上,看下面未经调整的直接效果 ...
- 近日使用Taro框架的一点小心得
1.yarn npm安装的包,跟权限问题有关,与网络也有关 2.Vue框架首先,是解决了view-model的问题,解放开发的双手,使得显示和数据和控制分开 3.当你觉得最近没有技术文章看时,就看收藏 ...
- inline-block，一个奇怪的问题：中间div掉下来
先上代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- C#多线程编程のSemaphore（信号量，负责协调各个线程）
Semaphore负责协调线程,可以限制对某一资源访问的线程数量 这里对SemaphoreSlim类的用法做一个简单的例子: namespace WpfApplication6 { /// <s ...
- ElasticSearch（二）：允许外网连接服务配置
上一篇文章的配置,只能在本机使用,但是要想为集群或者其他的机器连接,则需要做以下配置: 一.修改/opt/elasticsearch-6.4.0/config/elasticsearch.yml文件 ...
- Linux配置本地yum源
最近在配置zabbix时,遇到CentOS 无法连接网络问题,搜索到一种配置本地yum源的方法,特此记录 一.联网安装预处理 配置缓存,修改/etc/yum.conf [main] cachedir= ...
- 6.01-re-split_chinese
import re # 1.拆分字符串 one = 'asdsfsgsh' # 标准 是 s 为拆分 pattern = re.compile('s') result = pattern.split( ...
- docker: read tcp 192.168.7.235:36512->54.230.212.9:443: read: connection reset by peer.
在学习rancher的时候去下载rancher/agent镜像的时候,出现报错:docker: read tcp 192.168.7.235:36512->54.230.212.9:443: r ...
- YOLO 从数据集制作到训练
1.图片数据集收集 共 16种 集装箱船 container ship 散货船 bulker 油船 tanker 游轮 / 客轮 / 邮轮 passenger liner 渔船 fishing boa ...
- oracle等待事件-direct path read/write
转://http://blog.chinaunix.net/uid-23177306-id-2531235.html 一.direct path read1.与直接读取相关联的等待事件.当ORACLE ...