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

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 底端对齐 垂直对齐

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

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

    谷歌浏览器 div 水平对齐

    "谷歌浏览器 div 水平对齐"的问题主要涉及到跨浏览器的兼容性,尤其是 Internet Explorer (IE) 和 Mozilla Firefox 与 Google Chrome 之间的差异。下面将详细讨论如何解决这个问题,并提供两种可行的解决方案。 ...

    div中多行文字垂直居中

    在网页设计中,让多行文字在`div`元素中垂直居中是一项常见的需求,尤其在构建响应式布局和用户界面时。实现这个效果的方法多种多样,每种方法都有其适用场景和优缺点。以下是一些主要的策略来实现`div`中多行文字的...

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

    `属性可以轻松地将文本内容在div内居中对齐。例如: ```css .container { text-align: center; } ``` 2. **多行文本水平居中**: 对于多行文本,`display: flex;`和`justify-content: center;`组合可以实现...

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

    在网页布局设计中,将图片或者内容在div中实现垂直和水平同时对齐是一个常见的需求。这涉及到CSS的布局技术和定位方法。以下是如何利用`display`属性和特定的CSS技巧来达成这一目标的详细说明。 首先,我们有两个...

    div垂直居中

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

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

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

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

    在给定的文件中,提到了DIV和SPAN这两个HTML元素的垂直居中对齐的实现方法。 首先,我们先了解DIV和SPAN这两个标签在HTML中的作用。DIV是一个块级元素,用于定义文档中的分区或节。而SPAN则是行内元素,用于对文档...

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

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

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

    总的来说,`jQuery.valign` 插件提供了一个简单且灵活的方法来处理元素在div容器内的垂直对齐问题,对于快速开发和调试具有很高的实用价值。结合其他前端技术,我们可以创建出更加美观和响应式的网页。

    DIV+CSS DIV居中布局

    例如,垂直居中和水平居中可以分别使用Grid和Flexbox来实现。 在提供的`demo.html`文件中,可能包含了这些居中布局的示例代码。`logo.png`可能是用来测试这些布局效果的图片。通过查看和分析这些文件,可以进一步...

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

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

    DIV未知高度的垂直居中代码.rar

    标题中的“DIV未知高度的垂直居中代码”指的是在网页设计中如何使一个具有未知高度的&lt;div&gt;元素在页面上实现垂直居中的技术。在Web开发中,这是一项常见的需求,尤其是在响应式设计中,当内容高度不确定时,仍然希望...

    表单元素对齐

    3. CSS Grid中的垂直对齐:使用`align-items`属性调整行内元素的垂直对齐。 四、源码实现 在实际项目中,我们可能需要创建一个自定义的表单组件库,其中包含各种对齐方式的实现。例如,可以创建一个CSS类库,为每个...

    div的内容图片垂直居中代码(兼容多浏览器).rar

    在网页设计中,让图片或其他内容在div容器中垂直居中是一个常见的需求,尤其是在多浏览器兼容性方面。这里我们将深入探讨如何实现这个功能,并结合JavaScript(JS)特效和CSS样式来达成目标。首先,让我们先了解一些...

    CSS设置DIV垂直居中的N种方法 兼容IE浏览器

    首先,我们需要明确一点,CSS中的`vertical-align`属性主要用于表格单元格(如`&lt;td&gt;`)和其他内联元素的垂直对齐,而不是用于块级元素如`&lt;div&gt;`的垂直居中。 **一、单行文本垂直居中** 对于只包含一行文本的`&lt;div&gt;`...

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

    在CSS布局中,垂直对齐是一个常见的需求,尤其是在设计网页时。`vertical-align`属性用于控制行内元素或表格单元格(table-cell)元素内部内容的垂直对齐方式。然而,这个属性的理解和使用并不总是直观,很容易在...

Global site tag (gtag.js) - Google Analytics