`
bzhang
  • 浏览: 254946 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

div的上下对齐问题

阅读更多

今天把一个table放到div中,实现如果table过长会出现滚动条的效果,不过出现一个诡异的现象,一旦table变长,div也会向下移动。

 

 

把这个div的valign设为top,发现还是不行,查了下文档,发现div没有valign这个属性。。。。!!!!!! =,=

 

关门,放狗!

 

好在有人遇到过类似的问题,总结两个解决办法:

1.

For any inline element:

vertical-align: baseline | sub | super | bottom | text-bottom | middle | 
top | text-top | <percentage>

see also:
http://www.w3.org/TR/REC-CSS1#vertical-align

http://www.w3.org/Style/CSS/Test/CSS1/19981002/sec544.htm

   (or ANY book about CSS)

 

2.

Another idea that has come to me is 'bottom: 0;' could
be used; but I think it has to be positioned absolute
or fixed. The idea is not practically in most places.
html:
<div class="holder">
  <div class="bottom">
    ...
  </div>
</div>

css:
.holder {position: absolute; height: [value]}
.bottom {position: absolute; bottom: 0;}

 

 

 

分享到:
评论

相关推荐

    通过DOM使div左右对齐

    通过DOM使div左右对齐

    div中套用div的文本上下左右居中的css

    css:可以令层中层上下左右居中。(即:div之中的div的文本,上下左右居中显示)

    让Div层上下左右都居中的方法

    让Div层上下左右都居中的方法! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/

    DIV+CSS上下左右绝对居中

    在网页设计中,"DIV+CSS上下左右绝对居中"是一个常见的布局需求,尤其是在构建响应式网站时。这个主题涉及到CSS(层叠样式表)的布局技巧,它可以帮助元素在不同屏幕尺寸下都能保持在容器的中心位置。下面将详细探讨...

    DIV 上下居中 多行 省略号

    在网页设计中,让`&lt;div&gt;`元素内的多行文本实现上下居中并添加省略号功能是一项常见的需求。这通常涉及到CSS布局、文本对齐和溢出隐藏等多个技术点。接下来,我们将深入探讨如何实现这个效果。 首先,我们要解决的是...

    DIV+CSS DIV居中布局

    CSS Grid布局也支持居中对齐。在网格容器上设置`align-items: center;`和`justify-content: center;`可以实现双向居中。例如: ```css .container { display: grid; align-items: center; justify-content: ...

    css3代码属性Flexbox实现内部div上下居中效果.zip

    这个压缩包“css3代码属性Flexbox实现内部div上下居中效果.zip”包含了如何使用Flexbox来让内部div在垂直方向上居中的实例。下面将详细介绍Flexbox的相关概念和如何实现此效果。 1. **Flexbox基本概念** - **Flex...

    Div上下居中

    "Div上下居中" 在HTML和CSS开发中,实现Div元素的上下居中是非常常见的需求。今天,我们来探讨一下如何使用CSS实现Div元素的上下居中。 首先,让我们来了解一下问题的要点:Div元素的上下居中,即使Div元素在父...

    DIV_CSS测试题

    6. **对齐方式**:在CSS中,没有“上下对齐”这个概念,常见的对齐方式有居中、靠左、靠右和两端对齐。 7. **CSS样式类型**:包括内样式(内联样式)、内嵌式、链接式和导入式。 8. **ID选择符**:ID选择符前应加`#`...

    div+css公共属性

    8. `text-align`: 设置文本的水平对齐方式,如`.tleft`, `.tcenter`, `.tright`分别实现左对齐、居中和右对齐。 9. `font-weight`和`font-style`: `font-weight:bold`用于加粗文本,`font-style:italic`用于斜体,`...

    div完美自适应动态上下左右居中

    ### DIV完美自适应动态上下左右居中的实现方法 在网页设计与前端开发中,元素的居中对齐是一项常见的需求,特别是在制作信息提示框、模态框或是其他需要视觉上突出且位置固定的UI组件时。本文将详细介绍如何利用CSS...

    css实现div内图片上下左右居中

    DIV容器内设置 text-align:center 即可让图片居中,但是DIV内默认的图片是上对齐,不会上下居中,如果想要实现这样的效果,JS判断是比较麻烦的,因为DIV容器内的图片高度是不一定的,那么只有用table了,我想大多数...

    多个div中table的tdwidth设置一样也不法对齐

    因此,即使你为`td`设定了固定的宽度,如果单元格内容的宽度超过了这个值,浏览器仍可能自动扩展列宽,导致对齐问题。这就是为什么在多个`div`中的`table`即使`td`宽度设置一样也可能无法对齐的原因。 为了解决这个...

    jQuery实现上下左右垂直居中.zip

    "jQuery实现上下左右垂直居中.zip" 提供的是一个名为 "jquery.valign" 的插件,它专用于解决HTML元素(如图片、文字)在div容器内部的垂直对齐问题。下面将详细介绍这个插件的工作原理以及如何使用。 `jQuery....

    CSS在固定宽高的div内实现垂直居中的实例详解

    3. 将外层div的line-height属性设置为与div的高度相同,这样内部元素的基线(baseline)将与div的中线对齐,从而实现垂直居中。 4. 对于内部元素,同样设置display属性为inline-block,并应用vertical-align: middle...

    DIV+CSS布局练习.

    - **基本布局**:如居中对齐、上下左右边距设置。 - **浮动布局**:利用`float`属性实现元素并排显示。 - **定位布局**:使用`position`属性(static, relative, absolute, fixed)控制元素位置。 - **Flex布局*...

    纯css实现div容器内图片上下左右居中效果.zip

    本资源"纯css实现div容器内图片上下左右居中效果.zip"提供了一个使用纯CSS实现图片在div容器内完全居中的解决方案。下面将详细解释这一技术及其背后的原理。 首先,我们关注的是“纯CSS”方法,这意味着我们将不...

    图片上有箭头,可上下页切换

    2. **图像滑动容器样式**:`#imgslide` 设置了居中对齐、固定宽度以及相对定位等属性,使得整个图像滑动区域能够居中显示,并且具备一定的宽度。 3. **导航按钮样式**: - `#imgslide #pre` 和 `#imgslide #next` ...

    jquery.valign插件实现图片,文字上下左右垂直居中

    此前给大家推荐了一个纯css实现div容器内图片、文字上下居中的效果,缺点是采用了部分css3样式,兼容性较差,相关链接:纯css实现div容器内图片上下左右居中效果 今天特意在网上找到了一款插件--jquery.valign,可...

Global site tag (gtag.js) - Google Analytics