Center DIV horizontally with CSS_html/css_WEB-ITnose
一,用CSS使DIV层水平居中
对需要水平居中的DIV层添加以下属性:
margin-left: auto;
margin-right: auto;
这样在FF中已经居中了,可是在IE中看还是没有居中!
问题并不在CSS而在XHTML网页本身.
需要加上这样的代码才能使得上述设置有效果:
如何使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; 就可以了。
如何使图片在DIV 中垂直居中
用背景的方法。举例:
body{ BACKGROUND: url(http://www.w3cn.org/style/001/logo_w ... )#FFFno-repeatcenter; }
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等,也可以直接写数值"50 30"
如何使文本在DIV中垂直居中
果是文字,便不能用背景方法,可以用增高行距的办法变通实现垂直居中,完整代码如下:
test content
说明:
vertical-align:middle;表示行内垂直居中,我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字,就垂直居中了。
CSS+DIV控制页面中元素垂直居中代码 全局和区域垂直居中
另一方法:
******************************************
Second, use JS to center the layer
Add the following code to the
□::BEST4U Forum:: | |
function moveit() //This function is used to move the layer to the middle of the browser
{
L1.style.left=((document.body.offsetWidth -parseFloat (L1.style.width))/2) document.body.scrollLeft;
L1.style.top=((document.body.offsetHeight-parseFloat (L1.style.height))/2 ) document.body.scrollTop;
}
window.onload=moveit; //Execute moveit() when the web page is opened
window.onresize=moveit; // Execute moveit() when resizing the browser
window.onscroll=moveit; //Execute moveit() when pulling the scroll bar

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...

The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
