How do I center element horizontally?

somebody

For example, I want to have column represented by xhtml code
<body>x x x x x x x x x x x x x x x x x x x x x
x</body>
in the horizontal center of browser window.

Jul 21 '05 #1

Subscribe Post Reply

8752

Els

somebody wrote:

For example, I want to have column represented by xhtml code
<body>x x x x x x x x x x x x x x x x x x x x x
x</body>
in the horizontal center of browser window.

For standards following browsers:
p{
margin-left:auto;
margin-right:auto;
}

For IE5 on Windows:
body{
text-align:center;
}
p{
text-align:left;
}

Combine the two methods for allround effect :-)

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Deep Purple - Smoke On The Water (Live)

Jul 21 '05 #2

David Dorward

somebody wrote:

For example, I want to have column represented by xhtml code
<body>x x x x x x x x x x x x x x x x x x x x x
x</body>
in the horizontal center of browser window.

http://dorward.me.uk/www/centre/

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 21 '05 #3

Jasper de Vries

Els wrote:

somebody wrote:

For example, I want to have column represented by xhtml code
<body>x x x x x x x x x x x x x x x x x x x x x
x</body>
in the horizontal center of browser window.

For standards following browsers:
p{
margin-left:auto;
margin-right:auto;
}

For IE5 on Windows:
body{
text-align:center;
}
p{
text-align:left;
}

Combine the two methods for allround effect :-)

Another method (works in IE5+ and modern browsers):

p {
position: absolute;
left: 50%;
margin-left: -7.5ex;
}

--

Jasper
http://browservulsel.blogspot.com/

Jul 21 '05 #4

Els

Jasper de Vries wrote:

Els wrote:
somebody wrote:

For example, I want to have column represented by xhtml code
<body>x x x x x x x x x x x x x x x x x x x x x
x</body>
in the horizontal center of browser window.

For standards following browsers:
p{
margin-left:auto;
margin-right:auto;
}

For IE5 on Windows:
body{
text-align:center;
}
p{
text-align:left;
}

Combine the two methods for allround effect :-)

Another method (works in IE5+ and modern browsers):

p {
position: absolute;
left: 50%;
margin-left: -7.5ex;
}

And then see what happens if your window is narrower than 15ex.

That, and if there are any other elements below that aragraph, the
layout will be messed up; position:absolute takes the element out of
the flow, meaning that whatever element is next in the HTML file, will
move up.

--
Els http://locusmeus.com/
Sonhos vem. Sonhos vão. O resto é imperfeito.
- Renato Russo -
Now playing: Meat Loaf - Paradise By The Dashboard Light

Jul 21 '05 #5

Jasper de Vries

Els wrote:

Jasper de Vries wrote:

Els wrote:
somebody wrote:

For example, I want to have column represented by xhtml code
<body>x x x x x x x x x x x x x x x x x x x x x
x</body>
in the horizontal center of browser window.
For standards following browsers:
p{
margin-left:auto;
margin-right:auto;
}

For IE5 on Windows:
body{
text-align:center;
}
p{
text-align:left;
}

Combine the two methods for allround effect :-)

Another method (works in IE5+ and modern browsers):

p {
position: absolute;
left: 50%;
margin-left: -7.5ex;
}

And then see what happens if your window is narrower than 15ex.

That, and if there are any other elements below that aragraph, the
layout will be messed up; position:absolute takes the element out of
the flow, meaning that whatever element is next in the HTML file, will
move up.

Works fine to center pages. I must agry that "margin: 0 auto" would be
better, but I don't like the IE text-align hack.

--

Jasper
http://browservulsel.blogspot.com/

Jul 21 '05 #6

David Dorward

Jasper de Vries wrote:

Works fine to center pages. I must agry that "margin: 0 auto" would be
better, but I don't like the IE text-align hack.

Then don't use it. Put IE6 into Standards mode with a suitable Doctype, and
don't worry about IE 5.5 and earlier (which have small market shares, and
bigger problems then some content not being displayed in the centre). (Or
use the JavaScript hack).

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

Jul 21 '05 #7

by: George Hester | last post by:

Say I have this in a web page: <center><a href="http://www.microsoft.com">www.microsoft.com</a></center> I can use CSS, the DOM and\or JavaScript to determine the width style.innerHTML.length...

Javascript

legend in fieldset, position horizontally as centrified

by: Marek Mänd | last post by:

Can the legend element in fieldset be placed automatically by Mozilla horizontally in the middle of fieldset?

HTML / CSS

horizontally centering an absolute positioned div

by: jlub | last post by:

What I'm trying to do is have two different sets of input elements which occupy the same space on the page, only one of which is visible at a time. You switch between the two with a bit of...

HTML / CSS

Creating left and right absolute columns and two center fluid colums in CSS

by: Alex | last post by:

Hi Everone, I need some advice on how to setup 4 columns where the outside two are absolute (120px) and the inner two (side by side) are relevent (Fluid) and change with the screen. Here's my...

HTML / CSS

CSS substitution for the <center> tag

by: Nathan Sokalski | last post by:

As most of us probably know, the <centertag is deprecated. Because many elements and controls have an align attribute, centering them is easy enough. However, certain elements/controls do not (such...

ASP.NET

Horizontally centering a DIV (2)

by: lister | last post by:

I am trying to center a DIV horizonally, but I want the DIV fluid so that it is just wide enough to encompass its contents. I've tried margin:auto with no joy :( I've set up a demo here:...

HTML / CSS

Center web page info

by: Mel | last post by:

Does anyone know a way to center the info. on a webpage? I want my web site to work like MySpace.com where the page content remains centered when I resize the browser window. For the life of me I...

ASP.NET

Help with H3 element floating in the wrong place

by: .... www.FocusOnPanama.com .... | last post by:

I have an annoying problem with the site I am developing. This is how I see the problem appear: In a paragraph () I start with an IMG tag that has an 'align=left' OR 'align=right' (with the...

HTML / CSS

How do I get my images to line up horizontally

by: JohnD1969 | last post by:

I'm having trouble getting my images to line up horizontally. I have 3 images that are lined up on top of each other instead of horizontally. They are the Motorcycle, ATV and Snowmobile. Here is...

HTML / CSS

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

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,...

General

Basic Javascript concepts

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$) { } ...

Javascript

Merging data from multiple Excel files

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...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

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...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

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,...

C / C++

How do I center element horizontally?

Similar topics