Hi,
I've posted this question a few months ago but didn't get a truly satisfying
answer then. So I'd like to post my question again:
How can I center a DIV? The content in the DIV should be left-aligned, but
the DIV itself should be centered, like:
----------------------------------
| |
| =============== ==== |
| | Foo | |
| | Another foo | |
| | Still a foo-bar | |
| =============== ==== |
| |
| |
----------------------------------
There should be no fixed widths. The width of the DIV should be the width of
the content.
TIA,
Axel Dahmen
Jul 21 '05
32 14683
center works in FF and IE: margin: 0 auto;
> You most certainly did, no less than 33 replies.
You surely have noticed that they only supposed solutions having a fixed
width, didn't you?
> You're right on this one. As I said, I didn't check the link and read the replies.
You should. It ended up in an OT discussion like this one... :/
I'd be willing to bet, however, that there are at least a couple of good methods discussed in those 33 replies.
Nope. Actually there was... wait a moment, let me count... there was only
one. And it used a fixed with div.
So here we go... This thread again only contains one single useful reply.
Thanks to Phil!
> what works in IE: (doesnt work in gecko based browsers !) <center>
[ - snip - ] </center>
Thanks, Martin, for trying to help. Actually, <CENTER> has been deprecated
as of HTML 4.0.
Applause! You provided two really elaborated solutions indeed. I
particularly love your second solution. You've created a true work of art...
;)
Actually I'm using the One-Cell-Table solution myself as a workaround. But
in my opinion it's too much ado to create a TABLE infrastructure just to get
a centered DIV.
But I think Martin has a good solution there....
Regards,
Axel
-------------
<ph*******@tree fic.com> schrieb im Newsbeitrag
news:11******** *************@c 13g2000cwb.goog legroups.com... How can I center a DIV? The content in the DIV should be left-aligned, but the DIV itself should be centered There should be no fixed widths. The width of the DIV should be the width of the content.
It's really hard. The key problem is that DIVs with width:auto normally expand to occupy the available width in their container, so putting margin-left/right: auto on them doesn't have the effect that you want. It's quite a surprise that CSS doesn't have a natural way to do this.
So you need to get a DIV whose width is the width of its contents. I know of 3 ways to do this: tables, floats and position:absolu te. Unpleasant solutions include these two:
- Use a one-cell table:
<table style="margin: 0 auto; border: 1px solid green;"><tr><td > <p>gergheriu heguiherg uierhgui rehg</p> <p>uefheruifg hergfuiehr uehrg ueirgher</p> </td></tr></table>
- Use a float, then jump through hoops to center it:
<div style="border: 1px solid red; position:relati ve; left:50%;"> <div style="border: 1px solid blue; float:left;"> <div style="border: 1px solid green; margin-left:-50%; margin-right:50%;"> <p>gehrguirhg euigher uigh</p> <p>gfheruig hguiergh reguerh g</p> </div> </div> </div>
It works like this: the float in the middle forms a div that is based on the width of its content rather than its container. The outer div shifts this right so that its left edge is at the center of the page. The inner div then shifts it back to the left by half of its width, leaving it centered.
I don't know how cross-browser this is. I suspect it needs some tweaking to work with IE (add text-align:center somewhere?). You will need clear:left on the following content. Can anyone simplify this?
--Phil.
> <div style="display: table; width: 0%; margin-left: auto; margin-right: auto; border: 2px solid black;"> blabla<br> ölrkgölgkad<br> blabla<br> </div>
I think this is it! It seems a correct solution. I guess it's a bug for IE
not using the correct layout if the "width: 0%" is missing. But as width is
ignored for "display: table" according to http://www.w3.org/TR/2003/WD-CSS21-2...o-table-layout,
it doesn't break the code anyway.
Thank you for helping me with this great idea! :)
Regards,
Axel
Axel Dahmen wrote: You're right on this one. As I said, I didn't check the link and read the replies.
You should. It ended up in an OT discussion like this one... :/ I'd be willing to bet, however, that there are at least a couple of good methods discussed in those 33 replies.
Nope. Actually there was... wait a moment, let me count... there was only one. And it used a fixed with div.
So here we go... This thread again only contains one single useful reply. Thanks to Phil!
The previous thread mentioned is understandably of not much help since
it offers no real solution, is full of verbal diarrhea and verbal abuse
just as this thread here, affectionately referred to in this newsgroup
as "discussion ".
I will restrict response to conforming methods and not to deprecated
elements such as <center> or the use of any <table>. In order to avoid
any misguided "discussion ", be advised that I offer no solution for all,
but just what I can pass on. If this is not enough, click out now.
Centering is no problem, but where the difficulty appears is with the
requirement of a flexible width div. I see only one *conforming* way
with display:inline-block but it is only supported by Opera at this
time. The /closest/ I can come otherwise is to use display:inline with
left and right percentage margins (text is not properly centered).
..wrapper {text-align:center;bo rder:1px solid blue;}
..base {display:inline-block;text-align:left;bord er:1px solid red;}
..wrapper1 {margin:0 40%;border:1px solid blue;}
..base1 {margin:auto;di splay:inline;te xt-align:left;bord er:1px solid red;}
<div class="wrapper" >
<div class="base">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
<div class="wrapper1 ">
<div class="base1">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
--
Gus
Axel Dahmen wrote: <div style="display: table; width: 0%; margin-left: auto; margin-right: auto; border: 2px solid black;"> blabla<br> ölrkgölgkad<b r> blabla<br> </div>
I think this is it! It seems a correct solution. I guess it's a bug for IE not using the correct layout if the "width: 0%" is missing. But as width is ignored for "display: table" according to http://www.w3.org/TR/2003/WD-CSS21-2...o-table-layout, it doesn't break the code anyway.
Thank you for helping me with this great idea! :)
Regards, Axel
Works great for me except for one small item that has to be noted. On an
interword space a new line is generated, so must be used instead.
--
Gus
"Axel Dahmen" <NO*****@NoOneK nows.invalid> wrote: You most certainly did, no less than 33 replies.
You surely have noticed that they only supposed solutions having a fixed width, didn't you?
That wasn't part of the original question, you can't expect a correct
answer if you omit that. If you then start a new thread instead of
making this clear in the original thread, whilst complaining that your
earlier question wasn't answered properly you can expect the response
you got.
The correct answer (a FAQ in this group btw) is that the proper method
to achieve what you want is to use an inline-block element, like so:
<div style="text-align:center">
<div style="display: inline-block;text-align:left">
Foo<br>
Another foo<br>
Still a foo-bar<br>
</div>
</div>
This is currently supported by Opera (buggy), iCab and Safari, it can be
hacked to work in IE, but it's not supported in Gecko based browsers.
For a single instance of the inner box you could use a css table, but
this is not supported by IE at all.
Although it's probably possible to create something that works in all
modern browsers + IE, the solution would be so convoluted that you are
better of scrapping the idea, or use html tables.
--
Spartanicus
*Axel Dahmen* <NO*****@NoOneK nows.invalid>: How can I center a DIV?
You certainly already know about 'auto' margins and the 'text-align'
workaround for IE, because that's a FAQ.
There should be no fixed widths.
To horizontally center anything, there have to be some widths known, i.e.
either specified or calculatable.
The width of the DIV should be the width of the content.
Thus if it's text, there's only one line. Block widths are 100% of the
available by default. There are ways in CSS to make that the required
width only. Unfortunately they are either hackish or poorly supported, or
both.
Floats are shrink-wrapped since CSS*2.1 and in many browsers already, but
that would be the most hackish way. The other major approach is 'display'
with a value of 'inline', 'inline-block', 'inline-table' or even 'table'.
Multiple consecutive rules with these values may make this work in most
CSS capable browsers. 'text-align' or 'margin' have to be used accordingly.
Anyway, a concrete example page would help. For example to decide, whether
'div' should be used at all.
--
"The squeaking wheel doesn't always get the grease.
Sometimes it gets replaced."
Vic Gold This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
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 rough layout:
|
by: Claude Shea |
last post by:
Is DB2 Development Center an addon product that I have to download or
purchase separately? I can't seem to find it in any of my downloads
or on any of my CDs. Is it available for all versions of DB2?
I currently have two versions of DB2. My production environment is
DB2 UDB WSUE V8.1 on a Redhat Linux 7.2 . Currently in the process of
creating a new production environment which is DB2 UDB Workgroups V8.2
which is installed on Suse 9...
|
by: Henry Reardon |
last post by:
I have been having problems with the Development Center for several days
now. It seemed to be working fine when I initially installed DB2 (LUW)
Version 8 (FP7) and upgraded to FP8, except that I kept getting SQL1131
whenever I tried to prepared a stored procedure. As a result, I
completely deleted DB2 and reinstalled version 8 and upgraded to FP8. At
that point, I experimented a bit with some of the Environment Settings,
particularly the...
|
by: Joey |
last post by:
Does anyone know how to center this sample webpage in Firefox? If so,
will you provide the example as it applies to this sample webpage? I
have read numerous posts and articles on how to center content with
CSS...none are working for me. The best I can do at this point is the
"text-align: center" for my div tag, but that only works in IE. I want
to be able to center all the content within the div (effectively center
the site content) for...
|
by: judacris |
last post by:
I've seen the threads here about molding 2 divs in a centered fashion. but I can't seem to solve this thing.
my blogger blog is functioning well on my site for now, but the blog feed (left) and the sidebar (right) doesn't center
here's the css i'm modifying to center it. i apologise for the mess.
<html>
<head>
<title>cris-kun's 'Blog - www.puff-x.com</title>
<$BlogMetaData$>
| |
by: GloStix |
last post by:
I'm trying to center this banner, it's in a div that has the same width so it's not exactly "centering" but it's screwed up, It works in safari but in Firefox it's messed up. I uploaded a Video to show what I'm talking about.
http://screencast.com/t/i5SLg3cAczH
(*WARNING, TAKES A WHILE TO LOAD*)
*HTML*
<html>
<head>
<title>James Mann - Portfolio</title>
|
by: yangtono |
last post by:
Hi,
I am creating a table to list some data. The table is using a sorting and highlight function that I found from the net.
I can't attach image here, basically html will wrap the heading, therefore I notice the second line of the header is left align instead of centering. I believe it's because of the sort.htc script that will output an arrow when user click on the header to sort.
The code is as below:
<TABLE width="100%">
|
by: gaijinco |
last post by:
I was a hobbist web coder for years but I had to sidestep for a while.
Now I'm trying to return to it and I'm trying to clarify how am I
supposed to do somethings with CSS v.s. HTML and I'm specially having
difficulties with center alignment of elements like images and tables.
How is the "right" way to do it? (books that I have checked seemed to
dodge the issue)
I also have a doubt. html-atributes width and height are preferred
over...
|
by: Stevo |
last post by:
I've found that for IE6+, if you add the property text-align:center to a
DIV, then *anything* inside it gets centered. That can be a table, an
object/embed, another DIV, an image, or some text.
Firefox and Safari on the other hand don't treat text-align in that way.
In my tests on those browsers, they only centers images and text. Any
DIVs, object/embeds or tables remain default unaligned and generally
appear on the left.
Considering...
|
by: dougancil |
last post by:
I have a web page that I converted from a psd file to html with Photoshop and imported into Dreamweaver. The problem I'm having is that some viewers comment on the fact that the page is left justified. I inserted a div tag into the html with a wrap around selection and tried to modify the css rules so that this would align properly, and the page is still aligning left justified. Here is the code that I have for my css:
#site_layout {...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| |
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...
|
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...
|
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,...
|
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...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
|
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
| |
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
|
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...
| |