Loading
Cancel
Webmail Login
Control Panel Login
CSS Center a div : An example of how to center a div tag
.CO.UK ONLY £5.33
Find your perfect domain here

CSS Centre a div : An example of how to centre a div tag

css center div

How to centre a div with css

We can centre a div tag quite easily with css. This is something we often get asked how to do so below is the necessary code to centre a div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>css center div</title>
<style type="text/css">
#squirrelhosting {
  width: 300px ;
  margin-left: auto ;
  margin-right: auto ;
  text-align:left;
  
}
</style>
</head>

<body>
<div id="squirrelhosting">
The text in this div will be aligned left whilst the div will be centered.
</div>

</body>
</html>

Code Breakdown

The main part of this code which is centering the div tag "squirrelhosting" is;

#squirrelhosting {
  width: 300px ;
  margin-left: auto ;
  margin-right: auto ;
  text-align:left;
  
}

This code tells the browser the div tag should have equal distance from the right and left of either the page or the div it's contained in.

The line;

  width: 300px ;

can be altered to any width you require.

The second important bit is the div tag id:

<div id="squirrelhosting">
The text in this div will be aligned left whilst the div will be centered.
</div>

This tag is where you put the content you want centreing. If you wanted to centre all of your website, then you would replace


The text in this div will be aligned left whilst the div will be centered.


with your sites div tags etc.


Leave a comment

Has this guide helped you? Have an idea for a guide or need help? Let us know below.

© Copyright 2014 | Squirrel Hosting Limited
Company Number 9031308