`

DIV 的垂直居中

    博客分类:
  • css
CSS 
阅读更多

div的垂直居中比Table要复杂的多,到目前为止,我还没有找到哪个css属性能直接就让div实现居中,比如我们所知道的vertical-align,它对于Table就能很简单的垂直居中,但直接用到div就不行。只有通过一些技巧来实现。

1,单行文本的实现,有几种方法,最简单的方法就是设置它的line-height和div的height相同就可以。

<div style="height:100px; line-height:100px; background:#CCCCCC">垂直居中文本</div>

2,对于多行文本,如果div的height是可伸缩的,则最简单的方法就是设置div的padding上下相等,它看起来就居中了。

<div style="background:#CCCCCC; padding:20px">
垂直居中文本<br />
垂直居中文本<br />
垂直居中文本
</div>

3,对于多行文本,而且div有固定height,也就是我们通常要求的垂直居中,就相对麻烦,下面贴一段网上搜的代码:
css部分:

div#main {
   display:table;
   background:#CCCCCC;
   width:500px;
   height:500px;
   position:relative;
   overflow:hidden;
}
div#min {
   vertical-align:middle;
   display:table-cell;
   position:absolute;
   top:50%;
}
div#content {
   position:relative;
   top:-50%;
}

div部分:
<div id="main">
<div id="min">
<div id="content">
垂直文本<br />
垂直文本<br />
垂直文本
</div></div></div>

这几种居中方法在效果上虽是实现了,但用起来总觉得不灵活,还有另一种不错的居中方法,在介绍expression使用方法中一个例子讲到。

我在程序中用到的是div在td元素中,其设置方法为:

 

 <td  width="200" height="200"  nowrap >
     <div  style='float:left;padding-top:3;padding-bottom:3;font-size:40px;background-color:red'>序号</div>
 </td>

  

也就是通过padding-top、padding-bottom设置一个间隙,看起来DIV中的文字是垂直居中的。就我理解,DIV的高度是由padding-top+padding-bottom+font-size 来决定,只要他们加起来的和大于或等于TD的高度,则感觉上是居中的,但是事实上不是这样,只要设置了padding-top、padding-bottom不管你设置多高的TD,DIV都是居中的,而DIV的高度确实是由padding-top+padding-bottom+font-size 来决定.所以在CSS中,padding-top与padding-bottom是怎么起作用的,仍待研究。

分享到:
评论

相关推荐

    DIV 垂直居中

    DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中DIV 垂直居中

    div垂直居中的N种方法

    ### DIV垂直居中的N种方法:详尽解析与实践 在网页设计中,DIV元素的垂直居中一直是前端开发者关注的焦点。无论是响应式布局的需求,还是美观度的提升,垂直居中的实现都能显著增强用户体验。本文将深入探讨并演示...

    div垂直居中屏幕

    div垂直居中屏幕的方法,兼容IE6 7 8 Firefox

    DIV居中及DIV垂直居中.html

    该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.

    CSS解决未知高度的DIV垂直居中

    ### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中,实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说,这相对容易实现。但对于那些高度未知或者动态变化的元素,尤其是嵌套在另一个未知...

    div框水平垂直居中跟内容垂直居中.html

    div框水平垂直居中跟内容垂直居中

    div垂直居中

    标题 "div垂直居中" 描述的是一个常见的前端布局问题,如何在网页设计中让一个div元素在容器中垂直居中对齐。这个问题涉及到CSS(层叠样式表)的布局技术,尤其是定位和 Flexbox 或 Grid 等现代布局模式。 在传统的...

    CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)

    带DOCTYPE的写法。。 ------------------ CSS+DIV写的,上下固定高度,中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ...附送一个 DIV垂直居中的页面~~~

    div 垂直居中的多种方法详细介绍

    接下来,我们将详细介绍几种实现`div`垂直居中的方法。 首先,针对单行文本的垂直居中,可以通过设置`height`和`line-height`属性实现。当两者值相等时,文本行将垂直居中于容器内。例如,设置`div`的`height`和`...

    使用css实现div垂直居中的示例

    在网页设计中,让元素居中是常见的需求,特别是对于`div`这样的块级元素,垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先,我们要理解CSS布局的基本概念。在网页中,...

    垂直居中显示ie7+

    在网页设计中,"垂直居中显示"是一个常见的需求,特别是在多设备、多屏幕尺寸的环境下,确保元素在页面上无论何时都能保持居中状态,能够提供良好的用户体验。本话题主要探讨如何在IE7及以上的浏览器中实现元素的...

    div+css垂直居中和水平居中

    在网页设计中,实现元素的垂直居中和水平居中是一项常见的需求,这涉及到CSS布局技术。本篇文章将深入探讨如何使用div+css方法来实现这一目标。在现代Web开发中,div元素作为布局容器广泛使用,而CSS则是样式控制的...

    div垂直居中-CSS元素垂直居中方法的探究

    课程提供的两个PDF文件"div垂直居中-CSS元素垂直居中方法的探究-20181030181528302_98662.pdf"和"div垂直居中-CSS元素垂直居中方法的探究-2018103018153623_11191.pdf"很可能是详细的教程资料,包含了具体的代码示例...

    css教程:DIV垂直居中的办法

    经过今天一翻改进,终于找出了解决DIV垂直居中的办法。 &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;...

    CSS教程之div垂直居中的多种方法

    本文主要讲解了如何使用CSS实现div元素以及其中多行文本的垂直居中。首先,我们要明确CSS中的`vertical-align`属性并不能直接用于所有元素,它仅适用于表格单元格(如`&lt;td&gt;`)和其他具有`valign`特性的元素。对于`...

    CSS网页布局:div垂直居中的各种方法

    CSS网页布局中,div元素的垂直居中是一个常见的需求,尤其在设计响应式网页时更为重要。虽然CSS的`vertical-align`属性适用于某些特定元素,如表格单元格,但对于div等块级元素,该属性并不起作用。因此,我们需要...

Global site tag (gtag.js) - Google Analytics