以前面试中遇到相似问题。“纯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/
分享到:
相关推荐
<div class="content"><img src="img/不重样1.jpg"/></div> </div> </div> <!--方法二--> <div class="con2"> <div class="content2">这里里这里</div> </div> <!--方法三--> <div class="con3"> <div class=...
<div class="child">水平垂直居中</div> </div> ``` 5. 弹性盒水平垂直居中: 使用 `justify-content: center;` 属性可以实现主轴方向居中,使用 `align-items: center;` 属性可以实现侧轴方向居中。 例如: ```...
36. **`<IMG>`** 的 `hspace` 和 `vspace` 属性:设置图像与周围文本之间的水平和垂直空间。 - **示例**: ```html <IMG src="image.jpg" hspace="10" vspace="10"> ``` 37. **`<IMG>`** 的 `lowsrc` 属性:...
图片垂直居中显示可以通过在<img>标签中加入align="absmiddle"实现。 四、清除浮动 清除浮动是DIV+CSS中非常重要的一步,如果在同一行上有几个DIV并列显示,那么必须在其中加入清除浮动代码。如果在一行上只是一个...
网页制作基本标签详解 网页制作基本标签是构建网页的基础,以下是基本标签的详细解释: 1. 根标签:<HTML>、<HEAD>、<BODY> * <HTML>:表示该文件为 HTML 文件 * <HEAD>:包含文件的标题、使用...* <IMG>:贴图标识
1. align —— 用于设置水平对齐方式,可以用在 `<hr>`, `<table>`, `<caption>`, `<tr>`, `<td>`, `<th>`,`<input>`, `<iframe>`,`<img>`等标记中。 2. background —— 用于设置背景图片,可以用在 `<body>`, `...
**垂直对齐文本**:`vertical-align`属性通常用于`inline`或`table-cell`元素,如`<img>`或`<td>`,以控制其在父容器中的垂直位置。例如: ```html <p> <img src="example.jpg" alt="Example" style="vertical-...
- `<IMG HSPACE>` 和 `<IMG VSPACE>`:设置图像周围的水平和垂直空间。 - `<EMBED>`:内嵌外部媒体资源,如音频、视频等。 - `<META HTTP-EQUIV="Refresh">`:设置页面自动刷新或重定向。 4. **分隔与段落** -...
<tr><td>1</td><td>张力</td><td>18</td><td>男</td><td>计算机应用技术</td></tr> <!-- 更多行... --> </table> ``` 此外,`<table>` 标签还有其他属性,如 `border` 用于设置边框宽度,`width` 和 `height` ...
* `<th></th>`:设置表格头:一个通常使用黑体居中文字的格子 表格属性 * `<table border=?`:设置围绕表格的边框的宽度 * `<table cellspacing=?`:设置表格格子之间空间的大小 * `<table cellpadding=?`:设置...
- `<CENTER>` 和 `</CENTER>`:将内容居中显示。 - `<BLINK>` 和 `</BLINK>`:使文本闪烁,已不再推荐使用。 - `<FONT>`:设置字体大小和颜色,如`<FONT SIZE="3">`和`<FONT COLOR="red">`,现在通常使用CSS替代...
- **`<center>`**:使元素居中显示。 - **`<marquee>`**:创建滚动效果。 ```html <marquee behavior="scroll" direction="right">走马灯</marquee> ``` - **列表标签**:用于创建列表。 ```html <dl> <dt>中国...
- 用途:设置垂直居中对齐。 - 示例:`<td align="middle">居中对齐</td>` - **`marginwidth`** - 框架左右边缘与框架内的文件保留的空间 - 用途:设置框架的左右内边距。 - 示例:`<frame marginwidth="0">` - ...
<p align="center">居中文本</p> <p align="left">左对齐文本</p> <p align="right">右对齐文本</p> ``` 9. **水平线-- `<hr>`** - 用于插入一条水平线,用于分隔文本。 - 可以设置宽度、高度、颜色等属性。 ...
- **示例**:`<H1 ALIGN="CENTER">居中标题</H1>`。 3. **区分 `<DIV>`** - **描述**:用于划分文档中的区域,便于应用样式或布局。 - **示例**:`<DIV>...</DIV>`。 4. **区分对齐 `<DIV ALIGN="...">`** -...
<img src="example.jpg" width="100" height="50"> ``` 这里`width`和`height`属性分别指定了图片的宽度和高度。 ##### Vdata Vdata是WML中一个特殊的数值类型,用于表示垂直对齐方式。例如: ```wml <p align=...
<img src="image.jpg" alt="图片描述"> ``` - **属性**: - `src`:图片路径。 - `alt`:替换文本,在图片无法加载时显示。 - `width`:宽度。 - `height`:高度。 - `border`:边框宽度。 - `vspace`:...
以上就是关于使用CSS设置未知尺寸图片在容器中水平和垂直居中的方法。这些技术不仅适用于图片,也广泛应用于其他需要居中显示的元素。通过源码和工具的实践,你可以更好地理解和掌握这些技巧,从而提高网页设计的...
<li class="news"><img src="img/new.gif" alt="" /></li> </ul> ``` - `<ul>` 定义了一个无序列表。 - 每个`<li>`代表一个导航项。 - 使用`<a>`标签定义了链接。 - `.news` 类别中的`<li>`包含了一个图片,而非...