10 Replies - 20788 Views - Last Post: 17 June 2008 - 12:06 PM

#1 Min  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-June 08

How to make the page align center in browsers always?

Post icon  Posted 13 June 2008 - 07:38 AM

I am using SharePoint Designer 2007 to create .dwt for our new intranet.
Want to make sure the page come up always centered and don't know how.
I don't want texts to be centered, but the whole page centered on different size monitors.
Tried to wrap <div> around contents and apply a new style .center that I created.
The result was very much like texts align centered.
Any suggestion?
Is This A Good Question/Topic? 0
  • +

Replies To: How to make the page align center in browsers always?

#2 atdrago  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 08-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 08:15 AM

If you encase all the stuff you want to be centered in a division, you could do this in your css:

div.theBody{
margin: 0 auto;
}


That will set the margins on each side to auto adjust depending on the width of the browser. It creates the illusion of the division being centered on the page.

Hope that helps!
Was This Post Helpful? 1
  • +
  • -

#3 rayeade89  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 08:16 AM

I would suggest that you use a table, because tables are easy to work with and you can center it on your page easier than using <div> tags.
Was This Post Helpful? 0
  • +
  • -

#4 level1  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 08:17 AM

This is what I normally use in my style sheet.

body{margin:0; padding:0; text-align:center;}
#container{ width:900px; background-color:#FFFFFF;  margin: 0 auto; text-align: left;}



your html would then have all content inside a container div like this

<body>
	<div id="container">
	
	<!-- put content here -->
	
	</div>
</body>



The idea is that the left and right margins of your container are set to auto, the width is fixed, and since your body is aligning things center your div gets centered within it. You then add text-align: left to the container so text within it is aligned left.

Vertical centering is a bit different, but if you have a fixed height there is some simple css that is cross browse compatible. If you need vertical centering lemme know, but I think the above is what you are looking for.
Was This Post Helpful? 1
  • +
  • -

#5 atdrago  Icon User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 27
  • Joined: 08-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 08:21 AM

View Postrayeade89, on 13 Jun, 2008 - 08:16 AM, said:

I would suggest that you use a table, because tables are easy to work with and you can center it on your page easier than using <div> tags.

Using tables for non-tabular data is bad practice. And it still doesn't solve the problem of how to center align it.

level1 is right, you'll also need to set the width of the division.
Was This Post Helpful? 0
  • +
  • -

#6 rayeade89  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 10
  • Joined: 12-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 08:27 AM

Thanks for the advice atdrago. I learn something new everyday
Was This Post Helpful? 0
  • +
  • -

#7 Min  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 08:47 AM

:^: Thank you all very much!
Was This Post Helpful? 0
  • +
  • -

#8 Min  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 4
  • Joined: 13-June 08

Re: How to make the page align center in browsers always?

Posted 13 June 2008 - 10:29 AM

It worked! :D
Thanks again!

This post has been edited by Min: 13 June 2008 - 10:33 AM

Was This Post Helpful? 0
  • +
  • -

#10 hlemon  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 96
  • Joined: 02-June 08

Re: How to make the page align center in browsers always?

Posted 17 June 2008 - 06:51 AM

View PostMin, on 13 Jun, 2008 - 07:38 AM, said:

I am using SharePoint Designer 2007 to create .dwt for our new intranet.
Want to make sure the page come up always centered and don't know how.
I don't want texts to be centered, but the whole page centered on different size monitors.
Tried to wrap <div> around contents and apply a new style .center that I created.
The result was very much like texts align centered.
Any suggestion?


I usually do something a tad bit different with positioning, but it seems to work all right and if you adjust your browser window, it adjusts with it automatically. I use two div tags to wrap everything in and then center it controlling these two. It is also important to know what the size of your general layout is. For this I used a width of 850 pixels.

Here's the CSS:


#wrapAll { position: relative; width: auto; }
#wrapBody { left: 50%; margin-left: -425px; position: absolute; width: 850px; }




Here's the HTML:


<body>
   <div id="wrapAll">
	  <div id="wrapBody">
			Your content goes here
	  </div>
   </div>
</body>



Was This Post Helpful? 1

#11 biggles2008  Icon User is offline

  • Bassface
  • member icon

Reputation: 9
  • View blog
  • Posts: 623
  • Joined: 05-March 08

Re: How to make the page align center in browsers always?

Posted 17 June 2008 - 08:53 AM

Why dont u use HTML?

Between the <body> tags type <center> and close at the end of what you want to be centered?
Was This Post Helpful? 0
  • +
  • -

#12 level1  Icon User is offline

  • D.I.C Head

Reputation: 14
  • View blog
  • Posts: 65
  • Joined: 12-June 08

Re: How to make the page align center in browsers always?

Posted 17 June 2008 - 12:06 PM

View Postbiggles2008, on 17 Jun, 2008 - 08:53 AM, said:

Why dont u use HTML?

Between the <body> tags type <center> and close at the end of what you want to be centered?


Because <center></center> is deprecated as is align="center"
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1