给图片使用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. Linux环境（Centos) 安装mysql

    MariaDB是mysql的开源分支,自从mysql被oracle收购商业化之后,mysql之父在mysql5.5开源的版本的基础上重新开了一个分支,centos也把MariaDB作为mysql的默认 ...

  2. Qt程序无法输入中文的问题

    问题 在Linux环境下,用Qt编写的程序运行时不能在诸如输入框.文本框中输入中文(不会激活中文输入法). 注意与输入法类型有关(基于iBus或Fcitx) 原因 Qt程序的中文输入支持需要用Qt插件 ...

  3. spark reduceByKey

    reduce(binary_function) reduce将RDD中元素前两个传给输入函数,产生一个新的return值,新产生的return值与RDD中下一个元素(第三个元素)组成两个元素,再被传给 ...

  4. ubuntu如何安装samba

    1.samba安装sudo apt-get install samba2.修改smb.confsudo gedit /etc/samba/smb.conf 文件最后增加如下代码:[share] pat ...

  5. wsl命令行

    参考: https://docs.microsoft.com/en-us/windows/wsl/about 查看已安装 wslconfig /l /all 重装 wslconfig /u debia ...

  6. LWIP内存管理

    LWIP是一种TCP/IP协议栈,与嵌入式操作系统一样也提供了内存管理. 内存池里面有多个同样大小的内存,不同类型的内存池其里面的内存大小不一样.

  7. HttpContext.Current.Session[strName]未将对象引用设置到对象的实例

    项目开发是在4.5.1上,不知道为啥客户提供的服务器上安装的是4.5,差别不大也没去升级,然后部署MVC的时候web.config报错 <system.web> <compilati ...

  8. [GO]设备文件的使用

    package main import ( "os" "fmt" ) func main() { os.Stdout.WriteString("are ...

  9. [GO]面向对象编程

    对于面向对象编程的支GO语言的设计简洁而优雅,因为,GO语言没有沿袭传统面向对象中的诸多概念 比如继承(不支持继承,尽管匿名字段的内存布局和行为类似继承,但它并不是继承) 尽管GO语言没有封装.继承. ...

  10. Git: 教你如何在Commit时有话可说

    Git: 教你如何在Commit时有话可说   不知道大家有没有观察过那些在Github上Star数位居前列的项目,它们无一例外的都拥有完善的文档体系和高覆盖的测试用例.要做到完善没有规范肯定是不行的 ...