Css设置图片垂直居中

说明:样式设置主要是针对图片的父级元素,并非图片元素本身。

Css代码[图片父级点的样式]:

<style>
.box {
 /*非IE的主流浏览器识别的垂直居中的方法*/
 display: table-cell;
 vertical-align:middle;   

 /*设置水平居中*/
 text-align:center;   

 /* 针对IE的Hack */
 *display: block;
 *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/
 *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/   

/* 实验数据
 width:400px;
 height:500px;
 border: 1px solid black;
*/
}
</style>

Html代码:

<div class="box">
    <img src="图片路径" />
</div>
时间: 2024-08-28 10:29:09

Css设置图片垂直居中的相关文章

css设置图片水平及垂直居中

.box { /*非IE的主流浏览器识别的垂直居中的方法*/ display: table-cell; vertical-align:middle; /*设置水平居中*/ text-align:center; /* 针对IE的Hack */ *display: block; *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/ *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/ width:200px;

前端技术之CSS实现图片垂直居中

前端技术之CSS实现图片垂直居中技术 maybe yes 发表于2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  来自 : LMLPHP后院 让 图片实现水平居中比较简单,只需要在父级容器中添加属性 text-align 为 center 即可.使用纯 CSS 实现图片的垂直居中,可以将图片包裹容器的 d

CSS实现图片垂直居中

.box{ width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; } .out, .in{ float: left; margin-right: 15px; } /* out */ .out .t{ box-shadow: 0 -3px 5px -2px #f00; } .out .r{ box-shadow: 3px 0 5px -2px #0f0; } .ou

CSS让图片垂直居中的几种技巧

在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标准浏览器外,另外两种方法的兼容性还不错. 方法一 将外部容器的显示模式设置成display:table,这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签,并设置span的显示模式为display:table-cell,这样span内部的内容就相当于表格,可以很 方便的使用verti

css设置元素垂直居中的几个方法

最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现垂直居中 (适应于父级有固定高度的元素) 第一步,写html代码,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>元素垂直居中</title&

js+css设置图片进行动态显示调整。

.divImg{ width:233px; height:214px; border:1px solid #e5e5e5; overflow: hidden; text-align: center; } <div class="divImg"> <img src="path"> </div> 主要是设置Img标签外层div样式,overflow: hidden; $("img").load(function()

关于HTML+CSS设置图片居中的方法

有的时候我们会遇到这样一个问题,就是当我们按下F12进行使用firebug调试的时候,我们发现图像没有居中,页面底下有横向的滑动条出现,图片没能够居中,默认状态下只是紧靠在页面最左侧,而我们对图像缩小的时候,图像依然紧靠在页面最左侧,所有我们需要对图像设置居中,无论放大或者缩小页面,都使得图像至始至终都显示在页面的中间. 代码如下 HTML: <html> <head> </head> <body> <div class="backgroun

css设置水平垂直居中

想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { margin: 0 auto;} 如果有多个块级元素呢? .inline-block-center { text-align: center; } .inline-block-center div { display: inline-block; text-align: left; } .flex-center { display: flex

网页设计入门--使用css设置图片样式

一.定义图片边框 方法1: border-style:dotted(点划线)|dashed(虚线)|solid; border-color:参数; border-width:数值; 方法2: border:style(必须放在第一个位置) color width; 方法3: border-left-style:solid; border-right-color:#cacece; border-bottom-width:2px; 方法4: border-style:dotted solid das