Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do you center <div> 's and Layers in different resolutions 1

Status
Not open for further replies.
WizyWyg

WizyWyg

Technical User
Jan 31, 2001
854
JP
How do you center <div> 's and Layers in different resolutions?

I want the content of a page to be centered no matter what resolution that the visitor maybe in.

With tables this is very easy to do, but seeing that everyone saying that tables are bad for a layout, how can this be achieved using layers/divs ?
 
Sort by date Sort by votes
[tt]<div id=&quot;content&quot; style=&quot;text-align:center;&quot;><!-- Your content Here --></div>[/tt]

[sub]Never be afraid to share your dreams with the world.
There's nothing the world loves more than the taste of really sweet dreams.[/sub]
 
Upvote 0 Downvote
[tt]
<div style=&quot;text-align:center;&quot;>
[/tt]
Will centre-align the content of the <div>, not the <div> itself. There doesn't appear to be an explicit CSS property for getting a <div> to position along the centre, but I found a couple of indirect ways to do it. One is to use percentages:
[tt]
<div style=&quot;margin-left:10%;margin-right:10%&quot;>
[/tt]
Another is to use a second <div>:
[tt]
<div style=&quot;text-align:center&quot;>
<div style=&quot;width:400px;text-align:left&quot;>
<!-- Content in here -->
</div>
</div>
[/tt]
Or just use a table! ;-)

-- Chris Hunt
 
Upvote 0 Downvote
the only way would be to use javascript...

Known is handfull, Unknown is worldfull
 
Upvote 0 Downvote
Thanks, I actually found a site that has the code for it. And it works perfectly.
 
Upvote 0 Downvote
Theres a trick that uses absolute positioning with
negative margins... heres an example...

D.



<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;>

<html>
<head>
<title>Page title</title>

<Style>
.Centered200pxWide
{
position : absolute;
Width : 200px;
Left : 50%;
margin-left : -100px;
background-color : AliceBlue;
height : 100%;
top : 0px;
}
</Style>

</head>
<body>
<div class=&quot;Centered200pxWide&quot;> Some Text </Div>
</body>

</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
422
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
115
lmcate
lmcate
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
731
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
653
Mike Lewis
Mike Lewis
tyutghf
  • Locked
  • Question
Which website accessibility tool do you use?
Replies
0
Views
68
tyutghf
tyutghf

Part and Inventory Search

Sponsor

Back
Top