473,703 Members | 2,912 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

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 4202
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:20p x}
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{paddin g:10px;}
</style>
</head>
<body>
<div id="page">
<div id="nav">
<ul>
<li class="selected "><a href="index.htm l">Home</a></li>
<li><a href="about.htm l">About</a></li>
<li><a href="contact.h tml">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:20p x}
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{paddin g:10px;}
</style>
</head>
<body>
<div id="page">
<div id="nav">
<ul>
<li class="selected "><a href="index.htm l">Home</a></li>
<li><a href="about.htm l">About</a></li>
<li><a href="contact.h tml">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
2149
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
7253
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 function that is called from a button. I think I can use a <div id="t"></div> for this ? Something like
4
3484
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 is deprecated. Does anyone have any ideas?
3
4632
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) body { text-align: center; min-width: 500px;
3
3810
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" onclick="__doPostBack('SitesRadioButtonList_3','')" language="javascript" />
3
7852
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, and the images in them aren't all the same size. So I've sized the boxes to mach the largest of them, and I want to center them, so those that are smaller will be in the middle of the first div. Here's the code on the page: <table border="0"...
9
2510
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 to the width of the image and centered, or whether is simply fills the width of the container. I've tried various things to achieve this (e.g setting margins to auto) but I'm not having much luck. The URL for the page is: http://www.eminox.es
4
5283
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 horizonally and vertically centered within a <TD> </TD> area. No matter what I do the two image just present one above the other, albeit centered, NOT on top of each other. I originally did the entire page layout in TABLES until I found out I.E. 7...
0
9244
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
0
9111
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
9004
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
8961
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...
0
7853
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
1
6585
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
4421
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
1
3114
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
3
2058
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.