<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="胡超">
<title>super胡</title>
<style>
#a1{
display:table-cell;
text-align:center;
vertical-align:middle;

}
#a2{
display:table;
width:300px;
height:300px;
border:1px solid red;

}
</style>
</head>
<body>
<div id="a2">
<div id="a1">
<img src="7v/u=2787330296,1499357788&fm=21&gp=0.jpg"/>
</div>
</div>
</body>
</html>

//<img>的容器设置如下

2 {

3     display:table-cell;

4     text-align:center;

5     vertical-align:middle;

6 }

如何垂直居中一个<img>?的更多相关文章

  1. HTML5如何垂直居中一个浮动元素

    html如何垂直居中一个浮动元素//方法一:已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position:absolu ...

  2. 垂直居中一个img

    { display:table-cell; text-align:center; vertical-align:middle; }

  3. CSS 实现：元素相对于文档水平垂直居中

    [要求]:如何用 CSS 实现水平/垂直居中一个元素(相对于文档) <body> <div class="content"></div> < ...

  4. 浅谈css中一个元素如何在其父元素居中显示

    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...

  5. div块水平居中，垂直居中

    水平居中一个div想要水平居中于它的父div中只需要给它加css属性margin:0 auto; 即可 <!DOCTYPE html> <html> <head> ...

  6. CSS常见居中讨论

    先来一个常见的案例,把一张图片和下方文字进行居中: 首先处理左右居中,考虑到img是一个行内元素,下方的文字内容也是行内元素,因此直接用text-align即可: <style> .con ...

  7. 前端试题本（HTML+CSS篇）

    CS1. 下面关于IE.FF下面CSS的解释区别描述正确的有?(不定项)CS2请选出结构正确的选项CS3.下面哪些是HTML5 新增的表单元素?CS4在使用table表现数据时,有时候表现出来的会比自 ...

  8. BAT及各大互联网公司2014前端笔试面试题--Html,Css篇

    很多面试题是我自己面试BAT亲身经历碰到的.整理分享出来希望更多的前端er共同进步吧,不仅适用于求职者,对于巩固复习前端基础更是大有裨益. 而更多的题目是我一路以来收集的,也有往年的,答案不确保一定正 ...

  9. 各大互联网公司前端面试题（HTML/CSS）

    Html篇: 1.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是presto ...

随机推荐

  1. RCP: P2 Update两个烦人bug和解决办法

    问题 Eclipse新的P2 Update机制,使用起来很方便,如果使用P2 plugin自带的UI,开发者完全不用写任何代码 即可实现application的在线更新. 但是P2 Update至少有 ...

  2. firefox阅读模式

    并不是所有的网页都可以转换为阅读模式的,所以遇到一些识别不了的网页时,可以在地址栏输入“about:reader?url=网址”后回车即可.

  3. 反编译CHM文件

    1.进入dos 2.输入 HH.EXE -decompile <输出路径> <目标chm文件> 例如:hh.exe -decompile d:\heihei D:\123.ch ...

  4. web缓存

    web缓存HTTP协议的一个核心特性,它能最小化网络流量,并且提升用户所感知的整个系统响应速度. 什么能被缓存? *Logo和商标图像 *普通的不变化的图像(例如,导航图标) *CSS样式表 *普通的 ...

  5. 没有技术说明文档的开源都是耍流氓：微软Roslyn编译即服务在CIIP中具体应用(上)

    前段时间我发布了 github开源:企业级应用快速开发框架CIIP WEB+WIN+移动端,很多园友们都表示支持并与我探讨相关技术问题,上篇中我也承诺会写相关的技术文章,本篇就来介绍一下建模模块中使用 ...

  6. [luogu2982][USACO10FEB]慢下来Slowing down(树状数组+dfs序)

    题目描述 Every day each of Farmer John's N (1 <= N <= 100,000) cows conveniently numbered 1..N mov ...

  7. iOS - Apache Tomcat WebServer 服务器配置

    前言 提前下载好相关软件,且安装目录最好安装在全英文路径下.如果路径有中文名,那么可能会出现一些莫名其妙的问题. 提前准备好的软件: apache-tomcat-6.0.45.tar.gz eclip ...

  8. C中的volatile用法

    .volatile的本质: 1> 编译器的优化 在本次线程内, 当读取一个变量时,为提高存取速度,编译器优化时有时会先把变量读取到一个寄存器中:以后,再取变量值时,就直接从寄存器中取值:当变量值 ...

  9. java高薪之路__003_集合

    Java集合可分为Collection和Map两大体系 Collection接口 |---- Set: 元素无序.不可重复 |---- List: 元素有序.可重复 (动态数组) |---- Queu ...

  10. ArrayList 如何增加大小

    JDK1.8 private static final Object[] DEFAULTCAPACITY_EMPTY_ELEMENTDATA = {}; transient Object[] elem ...