`

------图片在div中垂直居中,设置边框。

阅读更多


.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;
 height:200px;
 border: 1px solid #eee;
}
.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
}

<div class="box">
 <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />
</div>

分享到:
评论

相关推荐

    对未知高度的图片设置垂直居中的方法详解

    在网页设计中,将图片垂直居中是一项常见的布局需求。当图片的高度未知时,实现垂直居中会增加一定的难度。本文将详细介绍几种不同浏览器下实现未知高度图片垂直居中的方法,并特别关注在IE浏览器中的表现。由于IE...

    css水平垂直居中

    在前端开发中,经常需要将元素在页面中进行水平垂直居中处理,特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直居中,并且无需指定具体的宽度和...

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    绝对居中div

    在网页设计中,"绝对居中div层"是一种常见的布局技术,用于使一个div元素在容器内保持垂直和水平居中的状态。这种技术对于创建响应式设计、弹出框、对话框或者任何需要在页面中心展示的内容至关重要。下面将详细阐述...

    不定宽高div内图片垂直居中的css样式

    这里我们探讨的主题是如何在不定宽高div内使图片垂直居中,主要关注CSS样式的实现方法。首先,我们知道传统的`display: table-cell`属性在现代浏览器中能很好地实现垂直居中,但遗憾的是,这个属性在Internet ...

    纯css实现div容器内图片上下左右居中效果.zip

    本资源"纯css实现div容器内图片上下左右居中效果.zip"提供了一个使用纯CSS实现图片在div容器内完全居中的解决方案。下面将详细解释这一技术及其背后的原理。 首先,我们关注的是“纯CSS”方法,这意味着我们将不...

    css实现div水平、垂直居中兼容chrome、ie8

    要实现一个DIV元素在网页中水平和垂直居中,可以使用不同的CSS方法。这些方法的兼容性决定了它们能够适用于哪些浏览器版本。在上述文件中,给出了几种不同的实现方式,其中一些兼容现代浏览器如Chrome,同时也兼容较...

    全屏css+DIV页面上中下三行布局,兼容各浏览器中间居中显示

    然后,对中间行的div设置height: 100% 和 margin: auto,这可以使内容在垂直方向上居中。若需要水平居中,可以使用text-align: center或者设置其父元素的display为flex,并使用justify-content: center。 考虑到...

    让图片垂直居中的使用方法

    在这个问题中,我们需要将未知尺寸但高宽均小于200px的图片在200px的正方形容器中实现水平和垂直居中。这个问题的难点在于图片作为置换元素,具有自己的特殊性质,以及垂直居中本身就是一个技术上的难题。 解决这个...

    CSS2.1如何让块元素垂直水平居中.rar

    对于水平和垂直居中,`display: flex`或`display: grid`在CSS3中非常有用,但在这里我们将专注于CSS2.1的解决方案。 ### 已知宽高块级元素的居中方法: 1. **使用绝对定位**: - 设置父元素`position: relative;`...

    css布局居中和CSS内容居中区别和对应DIV CSS代码.docx

    CSS布局居中是对整个容器元素(如DIV)进行设置,确保它在浏览器中水平居中。而内容居中是针对容器内部的元素,使它们在容器内居中对齐。 三、应用目的 - **CSS布局居中** 主要用于确保网页的主要部分在浏览器...

    CSS+JS 蒙板居中技术,居中技术,使用JS获取div的宽度高度?

    在CSS中,有多种方法可以实现元素的水平和垂直居中。以下是一些常用的方法: 1. **Flexbox布局**:这是现代浏览器广泛支持的一种方法,通过设置`display: flex`和`justify-content: center; align-items: center;`...

    div+css有实例,易学易懂

    - **修饰图片的水平和垂直居中**:通过`display`和`align-items`等属性。 #### 字体的综合属性 - **字体的选择**:通过`font-family`属性。 - **字体的大小**:使用`font-size`属性。 - **字体的加粗**:通过`font...

    图片垂直居中css写法兼容ie6

    在网站设计和网页布局中,图片的垂直居中是一个常见的需求。尽管现代浏览器对CSS的支持已经相当完善,但在早期的IE6浏览器中实现垂直居中却是一项挑战,因为IE6不支持某些CSS属性,例如`vertical-align`属性在非表格...

    CSS图片垂直居中方法整理集合 !(常见问题解答)

    在CSS布局设计中,将图片垂直居中是一个常见的需求,特别是在网页设计中。本文主要针对这一问题,总结了多种实现CSS图片垂直居中的方法,并通过实例代码进行详细解析。 1. **利用绝对定位和负margin** 在第一段...

    css3 flex实现div内容水平垂直居中的几种方法

    在本文中,我们将深入探讨如何利用Flexbox实现div内容的水平垂直居中。 首先,我们要了解Flexbox的主要属性: 1. `flex-direction`:这个属性定义了flex容器中flex项(子元素)的排列方向。有四个可能的值: - `...

    不定宽高的文字在div中垂直居中实现方法

    本文将详细介绍两种在不定宽高的文字在div中实现垂直居中的方法。这两种方法适用于不同的浏览器兼容性和设计需求,下面逐一进行解析。 方法一:使用绝对定位与CSS3变换 在这种方法中,我们首先设置一个父级div(#...

    新手学习DIV+CSS难点之经验总结.pdf

    许多新手都会遇到一些常见的问题,本文总结了八个常见的问题和解决方案,涵盖了网页居中显示、文字垂直居中显示、图片垂直居中显示、清除浮动、多列结构的DIV写法、Textarea在FireFox中不能自动换行的处理、设置UL表...

    Flex布局实现div内部子元素垂直居中的示例

    1、Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。...主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main en

    div-in-middle-of-border:垂直和水平放置在边框中间的定位图标

    为了垂直居中,我们可以将`top`属性设置为`50%`,然后使用`transform: translateY(-50%)`来向上移动元素自身高度的一半,使其底部与容器的边框顶部对齐。同样,对于水平居中,将`left`属性设置为`50%`,并使用`...

Global site tag (gtag.js) - Google Analytics