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

css布局中的div居中问题

    博客分类：
  • CSS
CSSIEHTML 
阅读更多

如何使DIV居中

主要的样式定义如下：

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使IMG在DIV 中垂直距中

用背景的方法。举例：

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"

 

如果是有意义的图片，不便用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：

<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{ MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
height:200px;
background:#F00;
width:400px;
vertical-align:middle;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><img height="79" src="style/001/logo_w3cn_194x79.gif" width="194" border="0" /></div>
</body>
</html>

说明：

vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入图片，就垂直居中了

分享到：
| jQuery插件开发
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIV+CSS DIV居中布局

    本篇文章将深入探讨如何利用`DIV+CSS`实现`DIV`的居中布局。 首先，我们要理解`&lt;div&gt;`元素。`&lt;div&gt;`是“division”的缩写，代表一个区域或区块，在HTML中用于组合其他元素，是构建网页布局的基础。通过设置`&lt;div&gt;`...

    CSS网页布局DIV水平居中的各种方法

    CSS 网页布局 DIV 水平居中的各种方法 在现代浏览器中，实现 DIV 的水平居中是一件非常简单的事情。下面我们将详细介绍几种常见的方法。 方法一：使用 margin:auto 这种方法是最简单的，直接将 DIV 的 margin ...

    DIV+CSS上下左右绝对居中

    Flexbox 是现代CSS布局模式，特别适合处理元素的对齐和分布。对于上下左右绝对居中，我们可以设置容器的 `display` 为 `flex`，并使用 `align-items` 和 `justify-content` 属性： ```css .container { display...

    DIV+CSS 图片垂直居中效果

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

    div水平居中的方法

    CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法 CSS网页布局DIV水平居中的各种方法CSS网页布局DIV水平居中的各种方法

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

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

    css布局居中和CSS内容居中区别和对应DIV CSS代码.docx

    CSS布局居中是对整个容器元素（如DIV）进行设置，确保它在浏览器中水平居中。而内容居中是针对容器内部的元素，使它们在容器内居中对齐。 三、应用目的 - **CSS布局居中** 主要用于确保网页的主要部分在浏览器...

    CSS网页布局DIV水平居中的各种方法[参考].pdf

    在CSS网页布局中，实现DIV水平居中是一个常见的需求，尤其在软件开发中，良好的页面布局能提供优秀的用户体验。本文将详细介绍几种不同的方法来实现这一目标。 首先，对于单行垂直居中的情况，我们可以利用CSS的`...

    Div+CSS简单布局

    要让Div居中，有多种方法，包括使用`text-align`、`margin`、Flexbox或Grid。 1. **Text-align居中**：如果Div是内联元素，可以设置父元素的`text-align: center`使其居中。 2. **Margin居中**：对于块级元素，...

    Div+CSS布局大全

    《Div+CSS布局大全》是IT领域中关于网页布局技术的重要教材，主要涵盖了使用Div（HTML中的Division元素）和CSS（Cascading Style Sheets）进行网页设计和布局的各种技巧和方法。Div通常作为容器元素，用于组织网页...

    在 CSS 中使 Div 居中的 3 种不同方法

    在CSS布局设计中，使元素居中是一项基本但至关重要的任务。本文主要介绍了三种不同的方法，帮助您在网页设计中实现Div元素的居中对齐。以下是对这三种方法的详细说明： 1. 使用自动边距（margin: auto）： 这种方法...

    DIV+CSS布局练习

    在"DIV+CSS布局练习"中，你可能会遇到如何设置`DIV`的宽度和高度、边距和填充、背景色和图像、文字样式等问题，以及如何处理浮动元素、清除浮动、实现居中对齐等常见技巧。此外，还可能涉及到`盒模型`的概念，理解盒...

    网页设计-页面布局篇(Css+Div)

    **标题与描述**：本教程聚焦于网页设计中的关键环节——页面布局，并详细介绍了如何运用CSS和Div技术来构建网页的基本结构。 **重要性**：网页设计是网络开发的重要组成部分之一，良好的页面布局不仅能够提升用户...

    DIV+CSS中让布局居中.docx

    以上内容详细介绍了在`DIV+CSS`中实现布局、背景、文字和内容居中的不同方法。通过合理运用这些技巧，可以创建出各种居中对齐的网页设计，确保在不同屏幕尺寸下的良好显示效果。记得在实际应用中结合具体的项目需求...

    Div+CSS布局入门教程(一二三四)

    Div+CSS布局是网页设计中的重要技术，它通过分离样式和内容，使得网页设计更加灵活、可维护性更强。本教程将带你一步步入门Div+CSS布局，从基础概念到实际操作，帮助你掌握这种布局方式。 首先，了解Div（Division...

    CSS 图片水平垂直居中于DIV

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

Magicbox
Global site tag (gtag.js) - Google Analytics