给图片使用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. 测试URL

    http://localhost:8080/dmonitor-webapi/monitor/vm/342?r=1410331220921&indexes=cpu&indexes=mem ...

  2. js中直接对字符串转义-用于solr ulr 关键词转义

    js代码 /* * 获取UTC格式的字符串,参数必须是 */var solrDateFormat = function (o){    var date;    if(typeof o == 'str ...

  3. [Fiddler] 在 Composer 中对HTTP报文进行编辑，重新执行

    如果想要对某个HTTP请求进行编辑,然后重新执行观察结果,可以将这个报文从左侧拖放到右侧的Composer里面 这样就可以很方便的修改HTTP请求的方法,报文头,报文体 在用 SoapUI 做 API ...

  4. Golang 线程池

    经常会用到协程,但是不能一下开那么多协调,只需要 poolSize 个即可,多了不行.这些个协程在执行完后必须等其完成之后才能进行下一步动作.假定工作方法为 work . package main i ...

  5. ASP.NET’s compilation system

    Compilation in ASP.NET applications First, let’s take a moment to revisit compilation in the context ...

  6. Spring框架总结（五）

    自动装配(了解) 根据名称自动装配:autowire="byName" 自动去IOC容器中找与属性名同名的引用的对象,并自动注入 延续使用user.dao.service.acti ...

  7. 设计模式16：Mediator 中介者模式（行为型模式）

    Mediator 中介者模式(行为型模式) 依赖关系的转化 动机(Motivation) 在软件构建过程中,经常出现多个对象互相关联交互的情况,对象之间经常会维持一种复杂的应用关系,如果遇到一些需求的 ...

  8. IIS8如何安装和使用URL重写工具-URL Rewrite

    下载和安装URL Rewrite IIS8默认是没有安装URL重写工具的,必须要自己下载安装. 如果IIS上默认有安装Web平台安装程序,我们可以使用平台自动安装URL Rewrite重写工具,打开I ...

  9. MacOS安装使用Node.js

    1. 到官网https://nodejs.org/zh-cn/download/下载,选择Macintosh Installer, 如下: 2. 按预设的下一步,Node.js版本为v6.10.0, ...

  10. C# 二维码生成——QRCode

    C#二维码生成,这里使用开源的ThoughtWorks.QRCode.dll库. 步骤: 1.下载ThoughtWorks.QRCode.dll库文件,并引用到项目中. 2.创建QRCodeHandl ...