`

div+css 居中

 
阅读更多

对于div来说,默认的宽度就是撑到父级元素的宽度,如果定义的max-width一般宽度都是扩展到设定的最大宽度,当确定了宽度后并且定义了margin-left、margin-right为auto就会让这个div块级元素居中,但此时div中的文字还是左对齐,要让文字在块中居中还需要设置text-align为center。

jquery的居中:

  $(window).resize(function(){
   
      $('.className').css({
04         position:'absolute',
05         left: ($(window).width() - $('.className').outerWidth())/2,
06         top: ($(window).height() - $('.className').outerHeight())/2
07     });
08   
09 });
10   
11 // To initially run the function:
12 $(window).resize();

其实模仿的上一种办法,只是在浏览器窗口改变时,动态计算div的高度和宽度。偷巧的完成了div的宽度和高度计算。

缺点是必须JavaScript支持。但,其效果非常好,可以用在华丽的用户界面上。

分享到:
评论

相关推荐

    div+css居中

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

    DIV+CSS简单登录界面模板

    在网页设计领域,`DIV+CSS`是一种广泛使用的布局技术,它通过定义不同的`Div`(Division,分块)元素并应用相应的`CSS`(Cascading Style Sheets,层叠样式表)样式来构建页面结构和外观。标题提到的“DIV+CSS简单...

    DIV+CSS水平垂直居中

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

    DIV+CSS DIV居中布局

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

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

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

    DIV+CSS 图片垂直居中效果

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

    DIV+CSS导航栏

    然后,通过CSS为`.navbar`和`.nav-item`设置相应的样式,如居中对齐、设置背景色、添加hover效果等: ```css .navbar { width: 100%; background-color: #333; text-align: center; } .nav-item { display: ...

    css,div+css

    【CSS和Div+CSS布局详解】 CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的样式表语言。在网页设计中,`div+css`布局是一种常见的网页布局方式,它将结构...

    Div+Css实例源代码

    《Div+Css实例源代码详解》 Div+CSS,即HTML中的<div>标签与CSS(层叠样式表)相结合的技术,是网页布局设计中的核心工具。这种技术的应用,使得网页设计更加灵活,代码结构更加清晰,同时提高了网页的可维护性和可...

    Div+CSS 布局 实例 源码

    1. **基础布局概念**:了解Div如何作为容器元素,以及如何通过CSS控制其宽高、内外边距、浮动和定位等属性,实现常见的如居中、对齐、多列布局等。 2. **盒模型理解**:理解CSS盒模型,包括内容(content)、内边距...

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

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

    Div+CSS简单布局

    **Div+CSS布局详解** Div+CSS布局是网页设计中常用的一种技术,它将内容(HTML元素)与表现(样式)分离,提高了网页的可维护性和可扩展性。Div是HTML中的一个容器元素,用于组织页面结构,而CSS(Cascading Style ...

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    DIV+CSS 图片居中效果 兼容 IE FF。。等浏览器

    Div+CSS 样式的使用演示

    例如,我们可以用以下CSS代码定义一个居中显示的div: ```css .div-center { width: 500px; margin: 0 auto; background-color: #f0f0f0; } ``` 在这个例子中,`.div-center`是div的类名,`width`定义了div的...

    DIV+CSS的30条进阶技能

    22. **使用CSS Flexbox**:解决一维布局问题,如自适应列表、居中对齐等。 23. **利用CSS Grid布局**:处理二维布局,如复杂的网格系统。 24. **掌握CSS伪类和伪元素**:如`:hover`、`:active`、`:focus`和`:...

    适合初学者的39个div+css网页布局例子

    8. **Flexbox布局**:现代CSS布局模型,能够轻松处理各种复杂的弹性布局,如居中对齐、自适应高度等。 9. **Grid布局**:CSS Grid提供二维布局,可以方便地创建复杂的、响应式的网格系统。 通过实践这些例子,初学...

    十天学会DIV+CSS(WEB标准).doc

    《十天学会DIV+CSS(WEB标准)》是一份详细且实用的网页制作教程,旨在帮助初学者在短时间内掌握网页布局的核心技术。本教程主要围绕HTML、CSS以及WEB标准进行展开,通过十天的学习计划,逐步引导读者从基础到进阶,...

    div+css常见兼容性问题

    在网页设计中,`div+css`是一种常见的布局方式,但它也伴随着一系列的浏览器兼容性问题。这些问题主要出现在不同浏览器对CSS规范的解读和实现上存在差异,尤其是老版本的Internet Explorer(如IE6和IE7)与其他...

    div+css全套框架

    2. 居中布局(Center Alignment):通过设置margin属性为auto,可以使Div水平居中。 3. 定位布局(Positioning):利用position属性(static、relative、absolute、fixed),可以精确控制元素的位置,实现复杂布局...

    一个DIV+CSS+JAVASCRIPT+FLASH的简单设计网站

    《构建基于DIV+CSS+JAVASCRIPT+FLASH的简单设计网站详解》 在Web开发领域,一个优秀的网站设计不仅需要美观的界面,还需要良好的用户体验和技术支持。本篇文章将深入探讨如何利用DIV+CSS+JAVASCRIPT+FLASH技术来...

Global site tag (gtag.js) - Google Analytics