`
trarck
  • 浏览: 28722 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

居中text-align,vertical-align

    博客分类:
  • css
阅读更多
水平居中
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,vertical-align,line-height居中布局笔记

    ### 居中布局知识点详解:`text-align`, `vertical-align`, `line-height` #### 一、`text-align`属性 `text-align`属性用于设置文本的水平对齐方式。它可以应用于大多数包含文本的元素,例如段落(`&lt;p&gt;`)、标题...

    使用vertical-align实现input和img对齐

    这里我们讨论如何使用CSS的`vertical-align`属性来解决这个问题。 `vertical-align`属性主要用于设置行内元素或表格单元格内容的垂直对齐方式。它适用于`display`值为`inline`、`inline-block`、`table-cell`、`...

    CSS标准:vertical-align属性

    原文:http://www.mikkolee.com/13最近几天仔细研究了一下vertical-align这个属性,结果让我大吃一惊,这个很“资深”的CSS标准...vertical-align的值有点多,包括 baseline sub supper top text-top bottom text-bot

    利用vertical-align:middle实现行内元素的水平垂直居中对齐

    `vertical-align-span`类应用于一个`&lt;span&gt;`元素,它创建了一个高为100%、宽度为1px的行内块级元素,通过调整`margin-left`来确保与图片对齐。图片元素自身也使用了`vertical-align: middle;`来确保垂直居中。 此...

    谷歌浏览器 div 水平对齐

    这样,我们可以用 `vertical-align: middle` 实现垂直居中,再配合 `text-align: center` 实现文字的水平居中。具体代码如下: ```html &lt;div class="text"&gt; Multi-line, vertical-align:middle; text-align:...

    CSS实例:vertical-align属性让网页层居中

    CSS实例:vertical-align属性让网页层居中. vertical-align属性使网页层居中 网页源代码如下: &lt;html&gt;&lt;head&gt;&lt;style&gt;body{TEXT-ALIGN: center;}#center{MARGIN-RIGHT: auto;MARGIN-LEFT: auto;...

    css vertical-align属性的一些理解与认识(一)

    CSS中的`vertical-align`属性是用于控制元素在行内元素(inline elements)或者行内块元素(inline-block elements)中的垂直对齐方式。这个属性在布局设计中扮演着重要角色,尤其是在处理表格、图像、输入框等元素...

    css 垂直对齐 css中vertical-align属性(垂直对齐)的使用说明

    vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | &lt;百分比&gt; | &lt;长度&gt; | inherit ``` - `baseline`: 元素的基线与其父元素的基线对齐,这是默认值。 - `sub`: 将元素的...

    div vertical-align不起作用解决办法

    在处理内联元素或者类似的行为时,`vertical-align` 结合 `line-height` 可以实现元素的垂直居中或其他对齐效果。例如,在给定的代码片段中: ```css #div-a { height: 60px; line-height: 60px; } ``` 这里将 `...

    css(样式表属性)

    - `vertical-align: text-bottom;` 设置元素底部与文本底部对齐。 - **文本装饰(Text Decoration)**:`text-decoration` - 示例: - `text-decoration: line-through;` 设置文本贯穿线。 - `text-decoration: ...

    完美居中1

    子元素`.box1`通过`display: inline-block`变为行内块元素,然后结合`text-align: center`使其在父元素中水平居中。 最后,我们讨论一种特殊情况:让导航中的文字靠底部对齐。这可以通过使用`vertical-align: ...

    CSS设置图片的对齐方式.pdf

    通过灵活运用`text-align`和`vertical-align`属性,我们可以有效地调整图片与周围元素的关系,提升网页的视觉效果和用户体验。在实际开发中,这些基础知识对于任何Web开发者来说都是必不可少的。

    CSS最常用的样式代码

    - `vertical-align: baseline;`: 基线对齐。 - `vertical-align: sub;`: 下标对齐。 - `vertical-align: super;`: 上标对齐。 - `vertical-align: top;`: 顶部对齐。 - `vertical-align: middle;`: 居中对齐。 ...

    CSS属性探秘系列(四):vertical-align

    一、前言vertical-align对于初学者最常见的使用是在表格中了,尤其是使用dreamweaver的童学,常见的数top,...4.vertical-align如何实现图片的垂直居中?5.vertical-aling如何实现input[type=’checkbox’],input[typ

    vertical-align 表单元素垂直对齐的解决方法

    首先,搜索到了wheatlee前辈的文章《大家都对vertical-align的各说各话》。wheatlee在他的文章中关于垂直居中提到了这样几个关键点: 1、vertical-align:middle的时候,是该元素的中心对齐周围元素的中心。 2、这里...

Global site tag (gtag.js) - Google Analytics