DIV里面的图片水平与垂直居中的方法

【DIV里面的图片水平与垂直居中的方法】的更多相关文章

DIV里面的图片水平与垂直居中的方法

<div class=“box”> <img /> </div> 1.水平居中: 1)box设置 text-align:center ; text-align:center可以实现子元素字体,图片的水平居中. 2)img设置 margin:0 auto;display:block ; margin:0 auto是针对块元素的水平居中方法,所以要加上display:block. 2.垂直居中: 1)图片使用padding,用box的高度减…

DIV或者DIV里面的图片水平与垂直居中的方法

<div class=“box”> <img /> </div> 水平居中的常用方式: text-align:center ——这可以实现子元素字体,图片的水平居中. margin:0 auto —— 这是针对块元素的水平居中方法垂直居中的常用方式: vertical-align: middle;——这个垂直居中属性,只对 inline 或者 inline-block 元素有效. 这里没考虑flex的垂直居中的用法 div中图片水平和垂直居中方式: 第一种方式…

使图片水平并垂直居中的一个Hack

淘宝的一个前端面试题:使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中. 想起了vertical-align:middle;但是不行,后来才知道还要display:table-cell;才可以,但是display:table-cell;这个在IE是没有用的,于是就想用line-height来解决,无果. 答案如下: <!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN&qu…

让DIV中的内容水平和垂直居中

让一个层水平垂直居中是一个非常常见的布局方式,但在html中水平居中使用margin:0px auto;可以实现,但垂直居中使用外边距是无法达到效果的.(页面设置height:100%;是无效的),这里使用绝对定位+负外边距的方式来实现垂直居中,但同时要考虑页面重置大小的情况,需要使用js来修正. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. 1.让层水平居中 1 2 3 4 5 .cla…

如何让DIV相对于body水平和垂直居中

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. .mydiv{ …

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;…

js脚本控制图片水平与垂直居中

使用方法: 1.定义ResizeImg(obj)方法 function ResizeImg(obj) { var boxHeight = $(".box").height(); var boxWidth = $(".box").width(); var imgHeight = $(obj).height(); var imgWidth = $(obj).width(); $(obj).css("position", "relative&…

css 水平、垂直居中

水平居中行内元素行内元素:(img.span.文字等行内元素),通过在父级元素设置 text-align:center 使元素水平居中. 块级元素块级元素:(div.p.h1...h6.ul.li等块级元素),通过在要居中元素设置 margin:0 auto(上.右.下.左),这里表示上下0 左右自适应,达到元素水平居中. 垂直居中行内元素行内元素:(img.span.文字等行内元素),通过在父级元素设置display: table-cell;vertical-align: middl…

css样式水平居中和垂直居中的方法

水平居中(包含块中居中) 1. 定宽,左右margin为auto.(常规流块盒.弹性项目[不用定宽]) 例子:在box1盒子上设置宽,再设置margin:auto: <style> .box1 { width: 200px; height: 200px; background-color: black; margin: auto; } </style> <body> <div class="box-all"> <div class=…

CSS实现图片在div a标签中水平垂直居中

CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src="test.jpg" /> </a> </div> /*For Firefox Chrome*/ .demo{border:1px #ddd solid;width:208px;height:148px;overflow:hidden;text-align:ce…

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align,但是这个属性对div元素不起作用. 目前通用的解决办法是,使用绝对定位,然后设置left和top为50%.然后通过margin来设置.下面具体代码演示了一个简单的登录页面,然后使登录界面水平居中和垂直居中.代码如下: <html> <head> <title>div元素水平…

CSS制作图片水平垂直居中

所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image)形式展示,是以<img>元素形式展示的.如下图所示: 解决问题——让图片水平垂直居中解决水平居中是相当的容易,如果图片左浮动并且"display:inline"时,我们只要给图片设置一个"text-align:center"属性,就顺利解决了水平居中.…

图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

CSS：使用CSS3将一个div水平和垂直居中显示

使用css3将一个div水平和垂直居中显示方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: auto; 其width.height如何更改都是居中显示的,兼容性可以,IE7及之前版本不支持 .div1{ width: 100px; height: 100px; border: 4px solid red; position: absolute; text-align: center; ; ;…

使当前对象相对于上层DIV 水平、垂直居中定位

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>使当前对象相对于上层DIV 水平.垂直居中定位</title> <meta name="keywords" content="" />…

css实现图片水平垂直居中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-…

div的水平和垂直居中

CSS实现div的水平居中 div的水平居中可以通过margin设置为0 auto实现. .myDiv { width: 200px; height: 100px; margin: 0 auto; } CSS实现div的水平和垂直居中通过CSS实现div的水平和垂直居中,首先需要知道div的高度和宽度,然后设置绝对定位,div的left和top分别设置为50%,然后通过margin左移和上移,距离分别为宽度和高度的一半. .myDiv { width: 200px; height: 100px…

让div等块级元素水平以及垂直居中的解决办法

一.背景我们在设计页面的时候,经常要把div等块级元素居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让div等块级元素居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让div等块级元素水平和垂直居中. 二.解决办法 1.CSS让div等块级元素水平居中原理:让一个div等块级元素水平居中,直接用CSS就可以做到.只要设置了div等块级元素的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得d…

让DIV水平和垂直居中的几种方法

我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就可以做到.只要设置了DIV的宽度,然后使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中. .mydiv{ margi…

单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i></i> <img class="YuYue1" src="images/ReserveServices/YuYue1.png" /> </div> .ServicesLiTopPic i { display:inline-block…

【转】如何让DIV水平和垂直居中

来源:http://blog.163.com/www.wxs_123/blog/static/82784664201321831746921/ 我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中. CSS让DIV水平居中说明,本文中所指的DIV包括HTML页面中所有的元素. 让一个DIV水平居中,直接用CSS就…

CSS制作图片水平垂直居中亲测推荐

空白标签实现图片的垂直居中这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主要使用了一张宽度为1px高度为100%的透明图片,并设置图片“vertical-align:middle”.后来我想了想,此处能不能不使用图片,直接像上面的实例一样,用一个空格的span标签,只是将其“display:inline”设置为“display:inline-block”.因为这两者的核心原理都是一…

CSS3 div水平、垂直居中，IE9以上、Firefox、Chrome均正常

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>水平.垂直居中Div</title> <meta charset="utf-8" /> <style> .CenterBox { posit…

基于jQuery实现的水平和垂直居中的div窗口

在建立网页布局的时候,我们经常会面临一个问题,就是让一个div实现水平和垂直居中,虽然好几种方式实现,但是今天介绍时我最喜欢的方法,通过css和jQuery实现. 1.通过css实现水平居中: 复制代码代码如下: .className{ margin:0 auto; width:200px; height:200px; } 2.通过css实现水平居中和垂直居中通过css创建一个水平居中和垂直居中的div是一件比较麻烦的事情,您必须事先知道另外一个div的尺寸: 复制代码代码如下: .c…

DIV水平和垂直居中的实现

在div的宽度和高度固定的情况下,实现div水平和垂直居中普遍采用如下的方式: <!DOCTYPE html> <html> <head> <style type="text/css"> .mydiv{ width: 400px; height: 300px; position: absolute; left: 50%; top: 50%; margin: -150px 0 0 -200px; background-color: blac…

文字在div中水平和垂直居中的的css样式

文字在div中水平和垂直居中的的css样式 text-align:center; /*水平居中*/ line-height: 20px; /*行距设为与div高度一致*/ 示例如下: HTML元素 <div>水平垂直居中</div> css样式 div{ width:200px;height:200px; /*设置div的大小*/ border:1px solid green; /*边框*/ text-align: center; /*文字水平居中对齐*/ line-height:…

html中div使用CSS实现水平/垂直居中的多种方式

CSS中的居中,在工作中,会经常遇到.它可以分为水平居中和垂直居中,以下是几种实现居中的方式. git 查看源码配合在线预览,效果更佳以下例子中,涉及到的CSS属性值. .parent-frame { width: 200px; height: 200px; border: 1px solid red; } .child-frame { width: 100px; height: 100px; border: 1px dotted blue; } 1: text-align:center,水…

div自动适应浏览器窗口水平和垂直居中

html <body> <div id="centerDiv">自动适应水平和垂直居中</div> </body> css ;;} #centerDiv{width:834px; height:550px; border:1px solid #9f9f9f; position:absolute; left:50%;margin-left:-417px; top:50%;margin-top:-275px; } 原理就是:先用left:50…

浮动div中的图片垂直居中

table-cell方法垂直水平居中 <!DOCTYPE html> <html> <head> <meta name="description" content="table-cell方法居中"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"…

css水平垂直居中的方法与 vertical-align 的用法

前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 + 4个方向全部0px + margin:auto 可以做到基于父容器水平垂居中:如果只需要垂直居中,那可以把left和right删掉,并且水平居中的方法也很多: 绝对定位 + 左50% + margin左:宽度一半的负值,可以做到水平居中,右也可以: 绝对定位 + 上50% + margin上:…