给图片使用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. python2.7 跨文件全局变量的方法-乾颐堂

    在使用Python编写的应用的过程中,有时会遇到多个文件之间传递同一个全局变量的情况. 文件1:globalvar.py 1 2 3 4 5 6 7 8 9 10 11 12 #!/usr/bin/e ...

  2. easyui 获取当前页签选中的名称

    parent.parent.$("#tabs").tabs('getSelected').panel('options').title == "收藏夹管理"

  3. 以二进制的形式查看文件 Linux之od命令详解

    od命令 以二进制的形式查看文件 od -t x1 /usr/local/FT/config/hsm_create.utf8.sql ef bb bf 4c 5f 0d 0a 5f 4e 4e 4f ...

  4. Spring Boot☞ 配置文件详解：自定义属性、随机数、多环境配置等

    自定义属性与加载 我们在使用Spring Boot的时候,通常也需要定义一些自己使用的属性,我们可以如下方式直接定义: application-dev.yml com.didispace.blog: ...

  5. springboot之JdbcTemplate单数据源使用

    本文介绍在Spring Boot基础下配置数据源和通过JdbcTemplate编写数据访问的示例. 数据源配置 在我们访问数据库的时候,需要先配置一个数据源,下面分别介绍一下几种不同的数据库配置方式. ...

  6. dbcp的销毁

    使用commons-dbcp-1.2.2.jar的DataSource,发现每次动态编译后连接池中的连接不会释放,新的连接池建立有mssql多出一组连接,只有重新启动tomcat或weblogic才可 ...

  7. Qt之生成pdf(转）

    Qt中如何让图片.文本.HTML或者其他形式的内容生成pdf呢?主要利用QPrinter来实现,QPrinter不止可以操作打印机来打印纸张文件,并且可以将文件保存至磁盘,存储为pdf格式的文件.   ...

  8. intellJ IDE 15 生成 serialVersionUID

    这个Inspections的位置不好找,建议搜索Serialization issues 然后勾选两项 serialzable class without "serialVersionUID ...

  9. JS 封装的结构关系

    /* -- 封装 -- */var _packaging = function() { //私有属性和方法 var age = "12"; var method1 = functi ...

  10. requestAnimationFrame 定时器

    这个方法是通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并 ...