473,382 Members | 1,302 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,382 software developers and data experts.

vert and hor centering text in <div>

1. Horizontal centering a <divin browser window.

The current trend seems to be to place page content in a fixed width area in the middle of the
browser window. How is this achieved? If I use a top level <divthen I can place it with CSS
attribute 'left:', but this is a fixed offset. Is it possible to have a <divcentered in the
browser window?
2. Verticle centering in <div>

I have a simple link bar at the top of my page with, as you might guess, links to other pages. The
<divis given a fixed hight to accomodate a background gif. How can CSS be used to vertically
center the text? CSS attribute 'verticle-align:' only seems to center one piece of text against
adjacent text.

Thanks everyone,

John Pote
Jul 25 '06 #1
3 4179
1. Horizontal centering a <divin browser window.

The current trend seems to be to place page content in a fixed width area in the middle of the
browser window. How is this achieved? If I use a top level <divthen I can place it with CSS
attribute 'left:', but this is a fixed offset. Is it possible to have a <divcentered in the
browser window?

2. Verticle centering in <div>

I have a simple link bar at the top of my page with, as you might guess, links to other pages. The
<divis given a fixed hight to accomodate a background gif. How can CSS be used to vertically
center the text? CSS attribute 'verticle-align:' only seems to center one piece of text against
adjacent text.
Try something like this...
Tom

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Home</title>
<style type="text/css">
body{margin:20px}
html {height: 100%;}
#page{position:relative; margin:0 auto; /* these are just examples
--*/ padding:10px; width:760px; height:410px; text-align:left;
background-color:#eee;}
#nav ul {list-style:none; margin: 0 0 0 0; padding:0;}
#nav ul li {display:inline; /* these are just examples --*/
margin:0; padding:10px 10px 10px 10px; background-image:
url(/images/foo.png);}
#nav ul li.selected a {text-decoration:none; color:black;}
#content{padding:10px;}
</style>
</head>
<body>
<div id="page">
<div id="nav">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>Homepage</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis.</p>
</div>
</div>
</body>
</html>

Jul 26 '06 #2
Tom,
Thanks for taking the time to reply and your code example that worked fine in centering the 'page'
<divbetween the browser window edges. Eventually I tracked down why my html code did not work. It
was the DOCTYPE line. Experimentation showed the following:
(BTW I'm using IE6.0.2900 and FireFox {Mozilla/5.0Gecko/20041107 Firefox/1.0})

FireFox always centers the top level 'page' <div>, even without a DOCTYPE line at all.

IE does if the DOCTYPE is (the ones I checked):

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/frameset.dtd">

and perhaps surprisingly:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/zzxya.dtd">

The following also work:
<!DOCTYPE http://>
<!DOCTYPE>
<!DOCTYPE JOHNS_ML NOTYETWRITTEN "-the quick brown fox" "http://absolutely any text here">

The last line also works. WHAT is IE looking for?

The following does not work unless followed by "http://" (quotes not needed)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Further mindless searching showed this is the minimum to STOP the centering working:
<!DOCTYPE " HTML 4.01 Transitional//EN"/* the leading space is needed! */

So it looks like it is recognising the page as html 4.01 transitional without any quallifying dtd
that breaks the auto centering of a <divin the IE browser window.

UNFORTUNATELY using:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

in a framed page with height="100%" tables then broke! The table size minimised rather than
expanding to fill the v height of the window. Just can't win.

Anyway thanks for the inspiration,
Best wishes,
John

tgscott wrote:
>>1. Horizontal centering a <divin browser window.

The current trend seems to be to place page content in a fixed width area in the middle of the
browser window. How is this achieved? If I use a top level <divthen I can place it with CSS
attribute 'left:', but this is a fixed offset. Is it possible to have a <divcentered in the
browser window?

2. Verticle centering in <div>

I have a simple link bar at the top of my page with, as you might guess, links to other pages. The
<divis given a fixed hight to accomodate a background gif. How can CSS be used to vertically
center the text? CSS attribute 'verticle-align:' only seems to center one piece of text against
adjacent text.


Try something like this...
Tom

<!doctype html public "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Home</title>
<style type="text/css">
body{margin:20px}
html {height: 100%;}
#page{position:relative; margin:0 auto; /* these are just examples
--*/ padding:10px; width:760px; height:410px; text-align:left;
background-color:#eee;}
#nav ul {list-style:none; margin: 0 0 0 0; padding:0;}
#nav ul li {display:inline; /* these are just examples --*/
margin:0; padding:10px 10px 10px 10px; background-image:
url(/images/foo.png);}
#nav ul li.selected a {text-decoration:none; color:black;}
#content{padding:10px;}
</style>
</head>
<body>
<div id="page">
<div id="nav">
<ul>
<li class="selected"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
<div id="content">
<h1>Homepage</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
diam nonumy eirmod tempor invidunt ut labore. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel
illum dolore eu feugiat nulla facilisis.</p>
</div>
</div>
</body>
</html>
Jul 26 '06 #3
Thanks for taking the time to reply and your code example that worked fine in centering the 'page'
<divbetween the browser window edges. Eventually I tracked down why my html code did not work. It
was the DOCTYPE line.
No problem. This sounds like a quirksmode issue. There's a good article
about this here:
http://www.quirksmode.org/css/quirksmode.html

Jul 27 '06 #4

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: F. Da Costa | last post by:
Hi, I' looking to retrieve ProdName1 form the <tr> below. <tr id="1-1-1" class="even"> <td> <div class="tier4"> <a href="#" class="leaf"></a> ProdName1 </div>
55
by: Ton den Hartog | last post by:
Stupid basic question but I find it horribly imposible to find the answer elsewhere... :-( I want to have a piece of text in my HTML page and want to be able to change it in a Javascript...
4
by: Hal Canary | last post by:
<div align="center"> does not seem to be identical to <div style="text-align:center">, as this example http://home.earthlink.net/~canaryh3/example.html points out. Yet the 'align' attribute...
3
by: CMAR | last post by:
To center my <div>, I am currently using something like <div id="navcontainer" align="center"> This centers fine, but is deprecated code. I have seen these two solutions recommended. 1) ...
3
by: Josef K. | last post by:
Asp.net generates the following html when producing RadioButton lists: <td><input id="RadioButtonList_3" type="radio" name="MyRadioButtonList" value="644"...
3
by: rsteph | last post by:
I'm using two divs to create a shadowed-box type effect. Within the top div I want to put an image. I can get the image to center right to left, but not top to bottom. I'm making a series of boxes,...
9
by: CJM | last post by:
I've inserted a new banner in an existing page and I want the banner image to be centered (horizontally) within its container. I'm not bothered whether the accompanying line of text is restricted...
4
by: harryusa | last post by:
I am trying to center 2 images concentrically which are z-indexed to lay on top of each other making an image with a border from another image that has a transparent center. I need the images to be...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.