给图片使用vertical-align:middle;就可以实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .box{

            width: 700px;

            height: 600px;

            border: 1px solid red;

        }

        img{

            vertical-align: middle;

        }

    </style>

</head>

<body>

<div class="box">

    <img src="1.jpg"><span>文字垂直居中对齐</span>

</div>

</body>

</html>

效果：

css 实现文字图片垂直对齐的更多相关文章

  1. CSS中关于vertical-align垂直对齐

    一向以来,我对vertical-align的属性都搞的不是太清楚,今天刚好碰到有朋友问我相关的问题,于是自己潜心研究了一番,发现这玩意还真不是个简单的东西,在此我分享的东西都是抛弃脑残的IE的,如果你 ...

  2. CSS 基础 例子 水平 & 垂直对齐

    一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100% ...

  3. css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)

    一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...

  4. pyqt5 工具栏文字图片同时显示

    import sys from PyQt5.QtWidgets import QMainWindow, QTextEdit, QAction, QApplication from PyQt5.QtGu ...

  5. CSS 之 控制图片与文字对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  6. 如何利用CSS代码使图片和文字在同一行显示且对齐

    对于初学css的新手朋友来说,经常会遇到这样一个问题,当文字和图片出现在同一行或者同一个div里面的时候,在浏览器中运行出来的显示效果往往是在不同的行,那么,我们怎么才能利用CSS代码使图片和文字在同 ...

  7. css使 同一行内的 文字和图片 垂直居中对齐?

    设置父容器, 使 父容器 div 下的所有元素 都 垂直对齐: father-container *{ vertical-align:middle 找回密码

  8. inline-block 文字与图片不对齐

    文字旁边搭配图片时,发现图片比文字靠上,原来默认的情况是图片顶对齐而文字底对齐,通过设置css属性可以使得图片与文字对齐. 设置各对象的vertical-align属性,属性说明: baseline- ...

  9. 关于用css实现文本和图片垂直水平居中

    关于用css实现文本和图片垂直水平居中   一直相信好记性不如烂笔头,最近遇到很多用到垂直居中的,整理一下以便日后查阅. 一.文本垂直水平居中 1.水平居中: 文字水平居中没什么好说的,用text-a ...

随机推荐

  1. POST 与 GET请求区别

     

  2. java中的不死兔问题(斐波那契数列)(递归思想)

    有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少? public class Item { public static ...

  3. 初学者教程之命名空间，范围解析及LEDB规则

    2014年5月12日 Sebastian Raschka编写 这是一篇关于采用LEGB规则实现Python变量命名空间及范围解析的简短教程.下面章节将会提供简短的可以说明问题的示例代码块来简要阐述问题 ...

  4. vim全局替换命令-乾颐堂

    语法为 :[addr]s/源字符串/目的字符串/[option] 全局替换命令为::%s/源字符串/目的字符串/g [addr] 表示检索范围,省略时表示当前行. 如:“1,20” :表示从第1行到2 ...

  5. jdk1.7 环境变量配置

    Windows系统中设置环境变量如下图右击“我的电脑”,选择“属性”. 点击“高级”选项卡,选择“环境变量”.  在“系统环境变量”中设置上面提到的3个环境变量,如果变量已经存在就选择“编辑”,否则选 ...

  6. CMDB小练习

    为什么要用CMDB? 因为公司之前统计资产信息用的是excel表格,随着业务的增加和信息的变更,这个表格变得越来越乱,所以我们就想着编写出一套自动管理资产信息的系统,实现自动管理资产信息 三种方案? ...

  7. maven添加阿里仓库

    1.修改settings.xml 在maven的settings.xml 文件里配置mirrors的子节点,添加如下mirror <mirror> <id>nexus-aliy ...

  8. xampp 添加ssl 访问

    编辑php.ini 文件,找到 “;extension=php_openssl.dll” (去掉前面的;号注释) <VirtualHost *:8090> DocumentRoot &qu ...

  9. HDU 2159 FATE (二维背包)

    题意:中文题. 析:dp[i][j] 已经杀了 i 个怪兽,已经用了 j 体积,所能获得的最大经验值,这个和一维的差不多,只是加一维而已. 代码如下: #pragma comment(linker, ...

  10. C# 银行系统

    今天分享一个大家都爱的Money 银行系统代码  可以随心所欲的存钱取钱 //要想成功,必须马到 //建立数组 Card[] cards = ]; //卡类初始化 public void Initia ...