`
ddl1st
  • 浏览: 99307 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

div+css 水平 垂直 居中

阅读更多
<style type="text/css">
.miao{width:170px;height:100px;display:table;text-align:center;border:solid 1px red;}
.miao span{display:table-cell;vertical-align:middle;border:solid 1px blue;}
.miao span img{border:dashed 1px green;}
</style>

<style type="text/css">
.miao{position:relative;overflow:hidden;}
.miao span{position:absolute;left:50%;top:50%;}
.miao span img{position:relative;left:-50%;top:-50%;}
</style>



<div class="miao" style="width:500px;height:220px;">
    <span><img src="http://www.google.cn/intl/zh-CN/images/logo_cn.gif" alt="Google" /></span>
</div>
分享到:
评论

相关推荐

    DIV+CSS水平垂直居中

    DIV+CSS 水平垂直居中网页学习 DIV+CSS 水平垂直居中是Web开发中一个常见的问题,如何将DIV元素水平垂直居中是一个非常重要的知识点。本文将详细介绍DIV+CSS水平垂直居中的方法和实现原理。 一、使用position:...

    DIV+CSS 图片垂直居中效果

    在网页设计中,"DIV+CSS 图片垂直居中效果"是一个常见的布局需求,它涉及到CSS的盒模型、定位和Flexbox或Grid等现代布局技术。以下是对这一主题的详细阐述: 1. **基础概念** - **DIV**:HTML中的`&lt;div&gt;`元素是一...

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

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

    div+css图片垂直居中

    "div+css图片垂直居中"是这个话题的核心,它涉及到CSS布局和浏览器兼容性问题,特别是对于Internet Explorer(IE)和其他现代浏览器的处理差异。下面将详细阐述如何实现这一目标。 1. **基本原理**: CSS中的定位...

    DIV+CSS DIV居中布局

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

    div+css文本水平垂直居中,兼容ie、谷歌等浏览器

    div+css文本水平垂直居中,兼容ie、谷歌等浏览器

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

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

    使用div+css开发个人网站毕业设计.doc

    此外,文档还提到了div+css在不同浏览器间的兼容性问题,例如div的垂直居中、margin加倍、IE浏览器特有的显示问题等,并给出了相应的解决策略。这提醒开发者在设计时需考虑跨浏览器兼容性,确保网站在各种环境下都能...

    Div+CSS简单布局

    4. **Grid居中**:在Grid布局中,`place-items: center`同时实现水平和垂直居中。 通过熟练掌握Div+CSS布局,我们可以构建出响应式、易于维护的网页。在实际应用中,应根据项目需求选择最合适的布局方法。不断实践...

    DIV+CSS上下左右绝对居中

    但是,这种方法不适用于垂直居中,除非容器的高度是固定的: ```css .centered-content { width: 100%; /* 水平填充容器 */ margin: auto; /* 水平居中 */ } ``` 以上方法可以根据项目需求和浏览器兼容性...

    div+css布局限制图片最大宽度图片水平垂直居中兼容IE6

    总结起来,要实现“div+css布局限制图片最大宽度图片水平垂直居中兼容IE6”,我们需要结合使用`max-width`属性限制图片宽度,通过`text-align`和内联块级元素实现水平居中,以及利用`vertical-align`和负`margin`...

    div+css常见兼容性问题

    2. 垂直居中可以用`line-height`和`vertical-align: middle`,水平居中可使用`margin: 0 auto`。 3. 为`a`标签设置`display: block`可以使内容块化,便于应用样式。 4. IE6中,浮动的`div`的`margin`可能会加倍,这...

    Div+CSS布局居中.pdf

    除了水平居中,文章还提到了垂直居中的方法,如使用`line-height`与容器高度相等实现单行文本垂直居中。对于多行文本或块级元素的垂直居中,有更多复杂的技术,如使用`display:table-cell`,`Flexbox`或者`Grid`布局...

    DIV+CSS 全屏垂直居中的一个办法

    下面将详细解释如何使用 `DIV+CSS` 实现全屏垂直居中,并探讨这种方法的优缺点。 首先,我们要创建一个全屏容器,通常是 body 或者一个全屏的 div。然后,我们设置这个容器的 `height` 和 `width` 为 `100%`,确保...

    div+css居中

    在网页设计领域,"div+css居中"是一种常见的布局技术,用于使元素在网页上水平或垂直居中对齐。这种技术利用HTML中的`&lt;div&gt;`元素作为容器,结合CSS(Cascading Style Sheets)样式来实现内容的定位。在本教程中,...

    div+css整体布局

    `可以实现子元素在父容器中的水平垂直居中。 六、响应式布局 随着移动设备的普及,`div+css`布局也应考虑响应式设计。可以使用媒体查询(`@media`)来根据不同屏幕尺寸调整布局,使页面在不同设备上都能良好展示。 ...

    DIV+CSS中让布局居中.docx

    background: #FFF url(http://www.divcss5.com/img/css-logo.gif) no-repeat center; } ``` 这里的`center`参数使得背景图片在水平方向上居中,而垂直方向通常会自动居中,除非你特别设置。 对于文字和内容的左右...

    CSS 图片水平垂直居中于DIV

    在网页设计中,将图片水平垂直居中于一个DIV元素是常见的需求,这涉及到CSS布局技术的运用。本文将深入探讨如何实现这个效果,并提供相关的源码示例。 首先,我们要明白CSS中的定位机制,包括静态定位、相对定位、...

    Div+CSS布局居中.docx

    【Div+CSS布局居中】是网页设计中常见的需求,主要涉及到CSS的布局技术,特别是元素的居中对齐方式。...对于垂直居中,也有类似的各种方法,例如使用`line-height`、`display: table-cell`、`flexbox`或`grid`布局等。

    DIV水平垂直居中

    这个主题,"DIV水平垂直居中",通常涉及到CSS布局技术和可能的JavaScript辅助方法。在这个场景中,描述提到使用了jQuery来实现,这是一种流行的JavaScript库,提供了丰富的功能和简便的API。 首先,我们来探讨CSS中...

Global site tag (gtag.js) - Google Analytics