`
deng131
  • 浏览: 672699 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

<img/>垂直居中方法

阅读更多
以前面试中遇到相似问题。“纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

题目的难点在于两点:垂直居中;图片是个置换元素,有些特殊的特性。
至于如何解决,下面是一个权衡的相对结构干净,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;
        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>


转自:http://www.planabc.net/2008/05/26/img_vertical_center_solution/
分享到:
评论

相关推荐

    垂直居中垂直居中

    &lt;div class="content"&gt;&lt;img src="img/不重样1.jpg"/&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!--方法二--&gt; &lt;div class="con2"&gt; &lt;div class="content2"&gt;这里里这里&lt;/div&gt; &lt;/div&gt; &lt;!--方法三--&gt; &lt;div class="con3"&gt; &lt;div class=...

    居中,自定义布局小点整理

    &lt;div class="child"&gt;水平垂直居中&lt;/div&gt; &lt;/div&gt; ``` 5. 弹性盒水平垂直居中: 使用 `justify-content: center;` 属性可以实现主轴方向居中,使用 `align-items: center;` 属性可以实现侧轴方向居中。 例如: ```...

    html标签说明-适用于初学者.txt

    36. **`&lt;IMG&gt;`** 的 `hspace` 和 `vspace` 属性:设置图像与周围文本之间的水平和垂直空间。 - **示例**: ```html &lt;IMG src="image.jpg" hspace="10" vspace="10"&gt; ``` 37. **`&lt;IMG&gt;`** 的 `lowsrc` 属性:...

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

    图片垂直居中显示可以通过在&lt;img&gt;标签中加入align="absmiddle"实现。 四、清除浮动 清除浮动是DIV+CSS中非常重要的一步,如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码。如果在一行上只是一个...

    网页制作基本标签.doc

    网页制作基本标签详解 网页制作基本标签是构建网页的基础,以下是基本标签的详细解释: 1. 根标签:&lt;HTML&gt;、&lt;HEAD&gt;、&lt;BODY&gt; * &lt;HTML&gt;:表示该文件为 HTML 文件 * &lt;HEAD&gt;:包含文件的标题、使用...* &lt;IMG&gt;:贴图标识

    HTML基础知识总结.pdf

    1. align —— 用于设置水平对齐方式,可以用在 `&lt;hr&gt;`, `&lt;table&gt;`, `&lt;caption&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`, `&lt;th&gt;`,`&lt;input&gt;`, `&lt;iframe&gt;`,`&lt;img&gt;`等标记中。 2. background —— 用于设置背景图片,可以用在 `&lt;body&gt;`, `...

    css-text 教程

    **垂直对齐文本**:`vertical-align`属性通常用于`inline`或`table-cell`元素,如`&lt;img&gt;`或`&lt;td&gt;`,以控制其在父容器中的垂直位置。例如: ```html &lt;p&gt; &lt;img src="example.jpg" alt="Example" style="vertical-...

    HTML语法大全,挺全面的

    - `&lt;IMG HSPACE&gt;` 和 `&lt;IMG VSPACE&gt;`:设置图像周围的水平和垂直空间。 - `&lt;EMBED&gt;`:内嵌外部媒体资源,如音频、视频等。 - `&lt;META HTTP-EQUIV="Refresh"&gt;`:设置页面自动刷新或重定向。 4. **分隔与段落** -...

    网页元素编辑.ppt

    &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;张力&lt;/td&gt;&lt;td&gt;18&lt;/td&gt;&lt;td&gt;男&lt;/td&gt;&lt;td&gt;计算机应用技术&lt;/td&gt;&lt;/tr&gt; &lt;!-- 更多行... --&gt; &lt;/table&gt; ``` 此外,`&lt;table&gt;` 标签还有其他属性,如 `border` 用于设置边框宽度,`width` 和 `height` ...

    HTML基础代码

    * `&lt;th&gt;&lt;/th&gt;`:设置表格头:一个通常使用黑体居中文字的格子 表格属性 * `&lt;table border=?`:设置围绕表格的边框的宽度 * `&lt;table cellspacing=?`:设置表格格子之间空间的大小 * `&lt;table cellpadding=?`:设置...

    HTML标记大全

    - `&lt;CENTER&gt;` 和 `&lt;/CENTER&gt;`:将内容居中显示。 - `&lt;BLINK&gt;` 和 `&lt;/BLINK&gt;`:使文本闪烁,已不再推荐使用。 - `&lt;FONT&gt;`:设置字体大小和颜色,如`&lt;FONT SIZE="3"&gt;`和`&lt;FONT COLOR="red"&gt;`,现在通常使用CSS替代...

    html标签总结

    - **`&lt;center&gt;`**:使元素居中显示。 - **`&lt;marquee&gt;`**:创建滚动效果。 ```html &lt;marquee behavior="scroll" direction="right"&gt;走马灯&lt;/marquee&gt; ``` - **列表标签**:用于创建列表。 ```html &lt;dl&gt; &lt;dt&gt;中国...

    网页知识--常用HTML代码速查表

    - 用途:设置垂直居中对齐。 - 示例:`&lt;td align="middle"&gt;居中对齐&lt;/td&gt;` - **`marginwidth`** - 框架左右边缘与框架内的文件保留的空间 - 用途:设置框架的左右内边距。 - 示例:`&lt;frame marginwidth="0"&gt;` - ...

    HTML标签详解大全

    &lt;p align="center"&gt;居中文本&lt;/p&gt; &lt;p align="left"&gt;左对齐文本&lt;/p&gt; &lt;p align="right"&gt;右对齐文本&lt;/p&gt; ``` 9. **水平线-- `&lt;hr&gt;`** - 用于插入一条水平线,用于分隔文本。 - 可以设置宽度、高度、颜色等属性。 ...

    html帮助文档

    - **示例**:`&lt;H1 ALIGN="CENTER"&gt;居中标题&lt;/H1&gt;`。 3. **区分 `&lt;DIV&gt;`** - **描述**:用于划分文档中的区域,便于应用样式或布局。 - **示例**:`&lt;DIV&gt;...&lt;/DIV&gt;`。 4. **区分对齐 `&lt;DIV ALIGN="..."&gt;`** -...

    WML语言(WAP语言)

    &lt;img src="example.jpg" width="100" height="50"&gt; ``` 这里`width`和`height`属性分别指定了图片的宽度和高度。 ##### Vdata Vdata是WML中一个特殊的数值类型,用于表示垂直对齐方式。例如: ```wml &lt;p align=...

    html标签详解 初学html

    &lt;img src="image.jpg" alt="图片描述"&gt; ``` - **属性**: - `src`:图片路径。 - `alt`:替换文本,在图片无法加载时显示。 - `width`:宽度。 - `height`:高度。 - `border`:边框宽度。 - `vspace`:...

    css设置未知尺寸图片的水平和垂直居中

    以上就是关于使用CSS设置未知尺寸图片在容器中水平和垂直居中的方法。这些技术不仅适用于图片,也广泛应用于其他需要居中显示的元素。通过源码和工具的实践,你可以更好地理解和掌握这些技巧,从而提高网页设计的...

    前端网页导航源代码

    &lt;li class="news"&gt;&lt;img src="img/new.gif" alt="" /&gt;&lt;/li&gt; &lt;/ul&gt; ``` - `&lt;ul&gt;` 定义了一个无序列表。 - 每个`&lt;li&gt;`代表一个导航项。 - 使用`&lt;a&gt;`标签定义了链接。 - `.news` 类别中的`&lt;li&gt;`包含了一个图片,而非...

Global site tag (gtag.js) - Google Analytics