Geek Answers Handbook

How to focus on <div>?

Possible duplicate:
How to center a div into a div?

I want to center the <div> (I am new to HTML5 and the <center> no longer exists) and, in any case, avoid using a table. This is what I have CSS for the <div> in question:

 #roundedcorner { -moz-border-radius: 15px; border-radius: 15px; background-image: url(file:///Macintosh%20HD/Users/julesmazur/Desktop/TAN3.0/Photos/bodydivbg.png); width: 960px; left: 50%; font-family: Ubuntu; }

(for anyone curious, Ubuntu is kindly provided by Google Web Fonts).

+7
source share
4 answers

Typical trick margin: auto . He will center him within what he has ever been.

demonstration

In addition, I have a few comments on your code (since you are a beginner).

  • left: 50%; does nothing if you do not change the style of the position, for example, position: relative; or position: absolute;
  • The div container should be bigger than it - otherwise its centering really means nothing. This is because styles such as margin: auto refer to the parent container, i.e. He needs space.
  • For Google web fonts, make sure you have @font-face . Also use alternatives. Not all browsers support web fonts, and the more control you have: the better. An example would be font-family: Ubuntu, Arial, Sans; ordered from most preferred for most backups.
+8
source

Do not use left . This will create a gab on the page on the left. Use margin: 0 auto instead.

 <div style="margin:0 auto;width:960px">I'm centered.</div>
+6
source

You can center the DOM elements that are absolutely positioned (horizontally and vertically) using:

 div { position : absolute; width : 960px; height : 500px; left : 50%; top : 50%; margin-top : -250px; margin-left : -480px; }

Here is a demo: http://jsfiddle.net/KBHjT/

0
source 
 <center><div></div></center>

try

-5
source

More articles:


All Articles