3 ways to center an HTML element with CSS

Welcome, Guest

(1 viewing) (1) Guest

HTML HELP, HTML TUTORIALS, HTML PROGRAMMING, HTML CODE, HTML DESIGN

Hypertext Markup Language (HTML) is the authoring software language used for building web pages. It is a subset of Standard Generalized Markup Language (SGML). In HTML, a block of text is often surrounded by tags that indicate how a browser should display it. There’s much more to HTML than that, of course, as the articles in this section detail.

Reply Topic

New Topic

Page:
1

TOPIC: 3 ways to center an HTML element with CSS

3 ways to center an HTML element with CSS 08 Dec 2009 07:34 #48

Plus 2 deprecated methods. Put an HTML element in the center of the page horizontally, using various techniques.

Instructions: Look at different ways to center an element, from deprecated markup to CSS.

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
    <head>
        <style type="text/css">
            //put styles here (listed below)
        </style>
    </head>
    <body>
        <div id="wrapper">
            <div id="centered_content">This is centered</div>
        </div>
     </body>
</html>
 
<!-- The way you're probably used to seeing. Allows margin on horizontal
sides to expand as needed to place content in center of containing element-->
 
#centered_content {
margin: 0 auto;
}
 
<!-- Typical IE fix. Use text-align: center; on wrapper then use text-align:
left; on centered content to return to normal align-left -->
 
#wrapper {
text-align: center;
}
 
#centered_content {
text-align: left;
}
 
<!-- Interesting way you may not have seen. Position absolutely 50% from 
left edge of containing element, then shift over to the right half of the
centered element's width with negative margin. left: 50%; puts left edge at 
middle of screen, then move over so that the center of the element is at 
the middle of the screen. The distance that you need to move right (from 
the left edge to center of the element) is half of the element's width -->
 
#centered_content {
position: absolute;
left: 50%;
width: 500px;
margin-left: -250px;
}
 
<!-- Deprecated old school ways: -->
 
<center>
    <div id="centered_content">This is centered</div>
</center>
 
 
<div id="centered_content" align="center">This is centered</div>

mnjon
OFFLINE
CE Staff
Posts: 78
Karma: 40

Reply Quote

CodersEngine

Reply Topic

New Topic

Page:
1

Tutorials Forum

Web Development Tutorials

CSS.HTML

Time to create page: 0.26 seconds