水平居中
text-align:center
对于ie6、7块级和内联级都可以水平居中。
其它浏览器内联级(内联块级,文字)元素才可以水平居中,块级无效。
margin:0 auto
块级元素设置了宽度可以使用margin:0 auto居中,内联元素无效。
垂直居中
网上已经有很多种垂直居中的方法line-height,上下padding,table-cell,正负50%(ie不支持table-cell)。这里利用另外一种vertical-align: middle。
vertical-align各种浏览器只对内联块级元素起作用。
默认的内联块级有img,input,td。
img,input的vertical-align是对周围元素(内联)和自己的排版方式,td的是自己内部的对齐方式(即table-cell方法)。
如果把一个内联元素的高度设置和父容器一样大,则旁边的元素就可以垂直居中,如果是内联块级则也要设置vertical-align: middle;。
em{
display: inline-block;
vertical-align: middle;
height: 100%;
zoom:1;
}
img{
vertical-align: middle;
}
<p><em></em>文字居中</p>
<p><em></em><span>内联元素居中</span></p>
<p><em></em><img src="1.gif"/></p>
分享到:
相关推荐
text-align,vertical-align,line-height居中布局笔记
### 居中布局知识点详解:`text-align`, `vertical-align`, `line-height` #### 一、`text-align`属性 `text-align`属性用于设置文本的水平对齐方式。它可以应用于大多数包含文本的元素,例如段落(`<p>`)、标题...
这里我们讨论如何使用CSS的`vertical-align`属性来解决这个问题。 `vertical-align`属性主要用于设置行内元素或表格单元格内容的垂直对齐方式。它适用于`display`值为`inline`、`inline-block`、`table-cell`、`...
原文:http://www.mikkolee.com/13最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准...vertical-align的值有点多,包括 baseline sub supper top text-top bottom text-bot
`vertical-align-span`类应用于一个`<span>`元素,它创建了一个高为100%、宽度为1px的行内块级元素,通过调整`margin-left`来确保与图片对齐。图片元素自身也使用了`vertical-align: middle;`来确保垂直居中。 此...
这样,我们可以用 `vertical-align: middle` 实现垂直居中,再配合 `text-align: center` 实现文字的水平居中。具体代码如下: ```html <div class="text"> Multi-line, vertical-align:middle; text-align:...
CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下: <html><head><style>body{TEXT-ALIGN: center;}#center{MARGIN-RIGHT: auto;MARGIN-LEFT: auto;...
CSS中的`vertical-align`属性是用于控制元素在行内元素(inline elements)或者行内块元素(inline-block elements)中的垂直对齐方式。这个属性在布局设计中扮演着重要角色,尤其是在处理表格、图像、输入框等元素...
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <百分比> | <长度> | inherit ``` - `baseline`: 元素的基线与其父元素的基线对齐,这是默认值。 - `sub`: 将元素的...
在处理内联元素或者类似的行为时,`vertical-align` 结合 `line-height` 可以实现元素的垂直居中或其他对齐效果。例如,在给定的代码片段中: ```css #div-a { height: 60px; line-height: 60px; } ``` 这里将 `...
- `vertical-align: text-bottom;` 设置元素底部与文本底部对齐。 - **文本装饰(Text Decoration)**:`text-decoration` - 示例: - `text-decoration: line-through;` 设置文本贯穿线。 - `text-decoration: ...
子元素`.box1`通过`display: inline-block`变为行内块元素,然后结合`text-align: center`使其在父元素中水平居中。 最后,我们讨论一种特殊情况:让导航中的文字靠底部对齐。这可以通过使用`vertical-align: ...
通过灵活运用`text-align`和`vertical-align`属性,我们可以有效地调整图片与周围元素的关系,提升网页的视觉效果和用户体验。在实际开发中,这些基础知识对于任何Web开发者来说都是必不可少的。
- `vertical-align: baseline;`: 基线对齐。 - `vertical-align: sub;`: 下标对齐。 - `vertical-align: super;`: 上标对齐。 - `vertical-align: top;`: 顶部对齐。 - `vertical-align: middle;`: 居中对齐。 ...
一、前言vertical-align对于初学者最常见的使用是在表格中了,尤其是使用dreamweaver的童学,常见的数top,...4.vertical-align如何实现图片的垂直居中?5.vertical-aling如何实现input[type=’checkbox’],input[typ
首先,搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点: 1、vertical-align:middle的时候,是该元素的中心对齐周围元素的中心。 2、这里...