给图片使用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. [C++] Lvalue and Rvalue Reference

    Lvalue and Rvalue Reference int a = 10;// a is in stack int& ra = a; // 左值引用 int* && pa ...

  2. ORM对象/关系模型

    1 ORM 对象关系映射(ORM)提供了概念性的.易于理解的模型化数据的方法.ORM方法论基于三个核心原则: 简单:以最基本的形式建模数据. 传达性:数据库结构被任何人都能理解的语言文档化. 精确性: ...

  3. twitter集成第三方登录是窗口一直出现闪退的解决方法

    需要创建自己的token,如下图

  4. mybatis 配置延迟加载 和 缓存

    <!-- MyBatis延迟加载时,创建代理类 --> <dependency> <groupId>cglib</groupId> <artifa ...

  5. Hive 0.12.0安装指南

    目录 目录 1 1. 前言 1 2. 约定 1 3. 服务端口 2 4. 安装MySQL 2 4.1. 安装MySQL 2 4.2. 创建Hive元数据库 2 5. 安装步骤 3 5.1. 下载Hiv ...

  6. 【小梅哥SOPC学习笔记】切换NIOS II CPU的主内存后软件中需要注意的几点设置

    切换NIOS II CPU的主内存后软件中需要注意的几点设置 有时候,我们可能面对这样一种情况: 1. 我们创建一个SOPC系统,并在QSYS中设置NIOS II的复位地址和异常地址都指向SRAM: ...

  7. 【Linux】Linux各文件夹说明

    转载 /bin/ — 用来贮存普通命令. /sbin/ — 许多系统命令(例如 shutdown)的贮存位置.属于基本的系统命令,如shutdown,reboot,用于启动系统,修复系统./sbin目 ...

  8. Javascript与数据结构系列（一）——栈的实现

    栈的实现 实现一个栈,当务之急是决定存储数据的底层数据结构.这里采用的是数组. 我们的实现以定义 Stack 类的构造函数开始: function Stack() { this.dataStore = ...

  9. Delphi 调试连接 任意Android手机/平板/盒子（要安装Google USB Driver，并且还有USB的相关许多文章）

    Delphi有时候无法连接调试一些手机,解决方案: 1.安装Google USB Driver 2.通过设备管理器查看手机或平板USB的VID,PID 3.修改你的电脑上的android_winusb ...

  10. JAVA IO总结及socket简单实现

    为了方便理解与阐述,先引入两张图: a.Java IO中常用的类 在整个Java.io包中最重要的就是5个类和一个接口.5个类指的是File.OutputStream.InputStream.Writ ...