`

设置DIV内容纵向居中的两种办法

 
阅读更多

<div style="width:500px; height:500px; border:1px solid #ccc; display:table-cell; vertical-align:middle;">
    <img   />
</div>


或者 

 

<img  style=" display:block; margin:0 auto; margin-top:expression((500 - this.height )/2); " />

分享到:
评论

相关推荐

    CSS 将两个button按钮垂直+水平居中

    在这个问题中,我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法,主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种方法适用于知道元素宽度和高度的情况。 首先,我们需要创建...

    DIV+CSS初学者布局教程

    4. **二列固定宽度布局**:`CSS网页布局入门教程4:二列固定宽度.doc`和`CSS网页布局入门教程7:二列固定宽度居中.doc`涵盖了两种不同的二列布局。一种是两侧宽度固定,中间内容自适应;另一种是整体居中,两列都有...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    1.jquery+div随屏幕滚动特效(支持设置参数滚动) 2.jQuery字符插件之适合留言板的jquery文本框输入字符限制插件下载 3.jquery实现Tooltip提示(文字、链接、地图锚点),自带5种不同样式 4.jQuery实现支付宝隐藏...

    CSS标签大全divcss.pdf

    - `text-align`:设定文本对齐方式,如左对齐(left)、右对齐(right)、居中(center)或两端对齐(justify)。 - `text-indent`:设置首行缩进。 - `vertical-align`:控制元素的垂直对齐,如基线(baseline)...

    一个简单的HTML网页 故宫学生网页设计作品 dreamweaver作业静态HTML网页设计模板 旅游景点网页作业制作

    - **定义与作用**:`DIV+CSS`是一种网页布局的方式,通过使用`&lt;div&gt;`标签结合CSS样式来构建网页结构,使得网页更加灵活且易于维护。在本案例中,网页采用了这种布局方式,实现了页面内容的组织与样式呈现。 - **...

    html面试常考考点+css常考考点

    当两个元素的 margin-top 和 margin-bottom 属性相遇时,会发生重叠的问题。空内容元素也会重叠。 3. Margin 负值问题 当设置 margin-top 和 margin-left 属性为负值时,元素将向上和向左移动;当设置 margin-...

    CSS3知识点归纳

    - **盒子居中和内容居中** - 居中元素本身:通过设置`margin: auto`实现水平居中。 - 居中文本内容:使用`text-align: center`。 - **行高(line-height)** - 控制行内元素的垂直间距。 - 示例:`line-height...

    html入门到放弃笔记

    1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div &lt;div align="center" id="container" title="这是一个div"&gt;&lt;/div&gt; 四大...

    网页设计复习题1111...pdf

    【插入】面板有两种显示形式,可以设置首选参数来自定义其使用规则。 3. **站点定义**:用于管理项目文件的组织和存储,可以通过【站点】/【管理站点】进行编辑或删除操作。 4. **文本对齐**:包括左对齐、居中...

    css入门笔记

    取值:auto 则内容居中 2、外边距margin 6、背景颜色 1.背景色 属性:background: 取值:颜色 2.背景图片 属性:background-image:url(); 取值:url() 3.背景图像平铺 属性:background-repeat 取值:...

    jQuery 位置插件

    插件的核心功能可以分为两种调用方式: 1. **内置固定位置浮动**:用户可以通过传递不同的字符串参数来设定浮动层的位置。例如: - `$(“#id”).floatdiv(“rightbottom”);` 将使元素固定在屏幕的右下角。 - `$...

    纯css3实现思维导图样式示例

    每一个节点的标题使用了标签包裹,并通过设置display属性为flex以及flex-direction为column使其内容垂直居中,这样可以保证所有节点标题文字都在各自容器的中心位置。 对于子节点的布局,使用了“oneBody”作为类名...

    HTML笔记总结

    4. **段落标签`&lt;p&gt;`**:`&lt;p&gt;`用于创建段落,`align`属性可以设置段落的水平对齐方式,有`left`(左对齐)、`center`(居中)和`right`(右对齐)三种选择。 5. **文本标签`&lt;font&gt;`**:`&lt;font&gt;`标签用于改变字体样式...

    间距浮动与对齐的最佳方案

    例如,对于一个宽度固定的`div`,可以设置`margin: 0 auto;`来使其水平居中。对于图片,也可以使用类似的方法,但可能需要额外考虑不同浏览器的兼容性。这里提到的`float:center`是一种非标准的属性,虽然在某些...

    微信小程序 (八)View组件详细介绍

    Flexbox是一种现代的布局模式,它允许内容在容器中根据需求动态调整位置和大小,适用于各种屏幕尺寸和方向。在微信小程序中,你可以通过设置View组件的样式属性来实现Flexbox布局。 1. `flex-direction`属性:此...

    易语言程序免安装版下载

     支持静态链接其它编程语言(如C/C++、汇编等)编译生成的静态库(.LIB或.OBJ),但仅限于COFF格式,支持cdecl和stdcall两种函数调用约定。  使用说明如下:函数声明和调用方法与DLL命令一致;“库文件名”以.lib...

Global site tag (gtag.js) - Google Analytics