`
yzgfbj
  • 浏览: 77407 次
  • 来自: ...
社区版块
存档分类
最新评论

div垂直对齐

阅读更多
今天在调试页面的时候发现div不支持vertical-align。查找了一下,可以通过下面解决。
  <div style="display: table; height: 300px; width: 300px; background: #aaa; _position: relative; overflow: hidden;">
<div style=" _position: absolute; _top: 50%; display: table-cell; vertical-align: middle;">
<p style=" _position: relative; _top: -50%">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam tincidunt, sapien sit amet semper molestie, diam justo ullamcorper tortor, at aliquam neque est eget lacus. Etiam sit amet odio. Maecenas vulputate malesuada lectus. Morbi vestibulum.</p>
</div>
</div>

以下划线开头的属性是ie/Win特有的支持的,在其他浏览器里会忽略掉。这样就可以针对ie/Win设计特别的样式。
分享到:
评论

相关推荐

    网站设计Div垂直对齐方法

    Div垂直对齐 CSS+Div 底端对齐 垂直对齐

    谷歌浏览器 div 水平对齐

    ie 火狐兼容而谷歌浏览器不兼容,div水平对齐的解决方式,仅供参考

    div中多行文字垂直居中

    div中多行文字垂直居中

    图片在div中垂直和水平同时对齐的实现方法

    最近项目中碰到的问题,具体代码就不写了,大体说下思路,有两个div,包含关系,图片在小的div中,大的div实现小div垂直居中,或水平,小div再实现另一个方向上的居中就可以了,忘了说了,外面div style="display:...

    DIV和SPAN垂直居中对齐的实现方法

    DIV和SPAN如何垂直居中对齐,水平居中很简单,设置text-align:center就可以了,垂直居中一直很是疑惑,下面为大家解惑

    垂直居中对齐的CSS示例代码

    垂直居中对齐的核心代码如下: 复制代码代码如下: .elment{ position:relative; top:50%; transform:translateY(-50%); } 具体参见如下案例,利用less将居中对齐的代码携程mixins。 html 复制代码代码如下: &lt;div...

    DIV水平垂直居中css实现代码

    主要代码: position:absolute; top:50%; left:50%; margin-top:-(height/2); margin-left:-(width/2) &lt;!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ...&lt;...

    将一个绝对定位的div水平垂直居中对齐

    在通常情况下,可以为元素添加margin:0px auto即可让元素在它的父元素水平居中,然后再将它设置为垂直居中对齐即可。但是为绝对定位的对象添加margin:0px auto并不能生效,所以说还是要用老办法实现。 代码示例如下:...

    div+css有实例,易学易懂

    div+css有实例,易学易懂第1 章 Web 标准布局的本质 第8 页 1.1 为什么要建立Web 标准 1.1.1 建立Web 标准的目的 1.1.2 使用Web 标准的好处 1.2 什么是Web 标准 1.3 内容、结构和表现 1.4 两种思考方式 1.5 Web 标准...

    css 非表格垂直对齐效果代码

    第一:相对定位和绝对定位 以下是一固定宽高的Div的垂直居中代码 复制代码代码如下: div{ position:absolute; top:50%; left:50%; width:400px; height:400px; margin:-200px 0 0 -200px; border:1px solid #000000...

    css实现文本和div居中对齐详细讲解示例

    复制代码代码如下:&lt;div class=”parentDiv”&gt;这里随意填写~… &lt;/div&gt; .1 实现文字水平居中(使用text-align) 对div.parentDiv设置text-align: center;来实现。CSS代码如下: 复制代码代码如下:[css] &lt;p&gt;.parentDiv ...

    CSS让图片垂直居中和底端对齐的代码

    本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。CSS使图片垂直居中的代码:&lt;!DOCTYPE ...

    vaadin-ordered-layout:一组两个Web组件,提供了一种简单的方法来水平或垂直对齐HTML元素。 Vaadin组件的一部分

    由两个Web组件组成,提供了一种简单的方法来水平或垂直对齐HTML元素,这是一部分。 &lt; div&gt; Horizontally &lt;/ div&gt; &lt; div&gt; Aligned &lt;/ div&gt; &lt; div&gt; Vertically &lt;/ div&gt; &lt; div&gt; Aligned &lt;/ div&gt; &lt;/ vaadin-...

    精通CSS+DIV网页样式与布局全集

    3.4.1 段落的水平对齐方式 3.4.2 段落的垂直对齐方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 4.1.2 图片缩放 4.2 ...

    精通CSS+DIV网页样式与布局视频教材

    3.4.2 段落的垂直对齐方式 3.4.3 行间距和字间距 3.4.4 首字放大 3.5 段落实例:百度搜索 第4章 用CSS设置图片效果 4.1 图片样式 4.1.1 图片边框 4.1.2 图片缩放 4.2 图片的对齐 4.2.1 ...

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

    jQuery实现上下左右垂直居中是一款jquery.valign插件,可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果。

Global site tag (gtag.js) - Google Analytics