Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Center contents of webpage

Tags:

html

css

I want to "centerize" the text and contents of my webpage. Now I don't want to align the text to center, I still want a left alignment but I want significant margins on the left and right so that everything looks relatively center-ish. Can you show me the HTML/CSS to achieve this? THanks.

like image 901
alamodey Avatar asked May 19 '09 12:05

alamodey


People also ask

How do I center all contents of a website?

How To Center Your Website. Use a container element and set a specific max-width . A common width many websites use is 960px. To actually center the page, add margin: auto .

How do I recenter a Web page?

Press Alt + Spacebar keys together, then select Move from the menu that appears. Now tap the left/right or up/down arrow keys to move the browser to whichever position you like.

How do I center the contents of a page in CSS?

To center text in CSS, use the text-align property and define it with the value 'center. ' You can use this technique inside block elements, such as divs. You can also center text in HTML, which is useful if you only want to center individual elements on the page on a case-by-case basis.


2 Answers

<html>
<head>
<style type="text/css">

body {
   text-align: center; /* Center in IE */
}

#content {
   text-align: left; /* reset text-align for IE */
   margin: 0 auto; /* Center in other browsers */
   width: 800px;
}

html {
   overflow: -moz-scrollbars-vertical; /* Force vertical scrollbar in FF */
}

</head>
<body>
<div id="content">

   content here

</div>
</body>
</html>

*UPDATE: I added some CSS that forces a vertical scrollbar in FF as per some comments below.

like image 98
Cᴏʀʏ Avatar answered Oct 14 '22 05:10

Cᴏʀʏ


Create 3 columns on your page. All your text goes in the center column and can be left alligned.

Have a look here for examples http://matthewjamestaylor.com/blog/perfect-3-column.htm

like image 32
Glen Avatar answered Oct 14 '22 03:10

Glen