I have a series of blocks that are float left that I need centered on
the page.
<div class="center" align="center">
<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>
</div>
None of these work:
..center{margin : auto}
..center{text-align: center}
How do I center the class center div?
I'm not a big fan of centering stuff but I'm just a programmer, not a
designer.
Jeff 11 34480
Jeff Thies wrote: I have a series of blocks that are float left that I need centered on the page.
<div class="center" align="center">
<div style="width: 100 px;float: left">thumbnail 1</div> <div style="width: 100 px;float: left">thumbnail 2</div> <div style="width: 100 px;float: left">thumbnail 3</div>
</div>
None of these work:
.center{margin: auto} .center{text-align: center}
How do I center the class center div?
You need to specify a width on that center div :-)
IIRC (anyone, please correct me if I'm wrong) the
text-align: center is needed for IE5, while the margin:auto
is there for the newer browsers.
--
Els
Mente humana é como pára-quedas; funciona melhor aberta.
On Sat, 13 Sep 2003 13:13:28 +0200, Els
<el*********@PL EASEtiscali.nl. invalid> wrote: Jeff Thies wrote:
I have a series of blocks that are float left that I need centered on the page.
<div class="center" align="center">
<div style="width: 100 px;float: left">thumbnail 1</div> <div style="width: 100 px;float: left">thumbnail 2</div> <div style="width: 100 px;float: left">thumbnail 3</div>
</div>
None of these work:
.center{margin: auto} .center{text-align: center}
How do I center the class center div?
You need to specify a width on that center div :-) IIRC (anyone, please correct me if I'm wrong) the text-align: center is needed for IE5, while the margin:auto is there for the newer browsers.
IMO the easist thing is to do with the outer <div> is to center it by
explicitly setting the widths of the left and right margins, eg:
..center
{
margin-left: 10%;
margin-right: 10%;
}
and that should work even with IE5 as well (heck, it even works in NS4
if you don't try to get too fancy).
Nick
--
Nick Theodorakis ni************* *****@urmc.roch ester.edu
Els wrote: IIRC (anyone, please correct me if I'm wrong) the text-align: center is needed for IE5, while the margin:auto is there for the newer browsers.
text-align: center when applied to a block will center all elements
contained in the block e.g. to center an img wrap it in a div and apply
text-align: center to the div. http://www.w3.org/TR/CSS1#text-align
margin: auto is used to center block level elements themselves. http://www.w3.org/TR/CSS1#horizontal-formatting
--Nikolaos
On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll: Els wrote: IIRC (anyone, please correct me if I'm wrong) the text-align: center is needed for IE5, while the margin:auto is there for the newer browsers.
You're relying on a bug in MSIE to compensate for another bug, but
yes, that's pretty much it, except that normally you'd want to negate
the text-centering effect inside of whatever block element it is that
you're centering, otherwise all your content would get centered.
For more detailed discussion I'd suggest http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS
Google also found this treatise on the topic: http://theodorakis.net/blockcenter.html
[...] margin: auto is used to center block level elements themselves.
http://www.w3.org/TR/CSS1#horizontal-formatting
In theory, yes, but that only works on conforming WWW browsers.
Alan J. Flavell wrote: On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
Els wrote:
IIRC (anyone, please correct me if I'm wrong) the text-align: center is needed for IE5, while the margin:auto is there for the newer browsers.
You're relying on a bug in MSIE to compensate for another bug, but yes, that's pretty much it, except that normally you'd want to negate
You mean Els is....
In re-reading Els reply I realize that he made the above statement in
the context of the *DIV* tag and more specifically as a an IE5 work
around *only*.
That [his remark was solely for DIV's] isn't totally clear from his
statement and that is why I replied - as there is a distinction based on
what the author is trying to center.
--Nikolaos
Alan J. Flavell wrote: On Sat, Sep 13, Nikolaos Giannopoulos inscribed on the eternal scroll:
Els wrote:
IIRC (anyone, please correct me if I'm wrong) the text-align: center is needed for IE5, while the margin:auto is there for the newer browsers. You're relying on a bug in MSIE to compensate for another bug, but yes, that's pretty much it, except that normally you'd want to negate the text-centering effect inside of whatever block element it is that you're centering, otherwise all your content would get centered.
I knew it was a bug, but didn't realise the workaround was
relying on yet another bug :-(
The text-centering effect inside does bug me sometimes, but
I manage to make a construction of divs to help
left-aligning parts of the content.
For more detailed discussion I'd suggest http://www.allmyfaqs.com/cgi-bin/wik...enter_with_CSS
Google also found this treatise on the topic: http://theodorakis.net/blockcenter.html
Thanks, I bookmarked those pages. I do manage to get my
pages the way I want in most browsers, including IE5.5 and
IE for Mac, but I should study this stuff some more to not
spend so much time working it out every time again :-)
margin: auto is used to center block level elements themselves.
http://www.w3.org/TR/CSS1#horizontal-formatting
In theory, yes, but that only works on conforming WWW browsers.
--
Els
Mente humana é como pára-quedas; funciona melhor aberta.
Nikolaos Giannopoulos wrote: In re-reading Els reply I realize that he made .....
That [his remark ..... his statement .....
I'm not a 'he'.... ;-)
--
Els
Mente humana é como pára-quedas; funciona melhor aberta.
Nikolaos Giannopoulos wrote: text-align: center when applied to a block will center all elements contained in the block e.g. to center an img wrap it in a div and apply text-align: center to the div.
Just so that the op is clear:
text-align: center when applied to a block level element will center
all elements contained in it *in MSIE/Win only*[1]. In conforming
browsers, text-align: center will center only inline content in a block.
div {text-align: center; border: thin solid black }
p {border: thin solid green }
p.narrow {width: 12em; border: thin solid blue }
<div>
this text is centered within the div
<p>
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>
<p class="narrow">
this text is centered within the p by inheritance, but
the p element itself is not centered in e.g. Mozilla
</p>
</div>
[1]I don't have MSIE 6, and am not sure about its behavior. I think
in standards mode, it behaves like Mozilla and Opera on this matter,
but in quirks mode it emulates the bugs of MSIE 5.x/Win. Also, there
are other older browsers that may also suffer from this bug.
--
Brian
follow the directions in my address to email me
On Sat, Sep 13, Els inscribed on the eternal scroll: I knew it was a bug, but didn't realise the workaround was relying on yet another bug :-(
It's OK, I would do the same myself ;-)
I sure wouldn't rely on a bug to get some effect I wanted, but I'm
quite happy to exploit a bug which compensates for some other bug, as
long as it does no harm for conforming browsers (..and other user
agents, I should say). This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics |
by: Jeff Thies |
last post by:
I have a series of blocks that are float left that I need centered on
the page.
<div class="center" align="center">
<div style="width: 100 px;float: left">thumbnail 1</div>
<div style="width: 100 px;float: left">thumbnail 2</div>
<div style="width: 100 px;float: left">thumbnail 3</div>
</div>
|
by: Jonah Bishop |
last post by:
I have a puzzling problem with centering text, and I'm hoping that someone
here can help me out. First of all, let me state that I am using XHTML 1.0
Strict and CSS for all layout purposes (no tables). My website consists of a
few, simple parts: a "container" DIV which is centered and 750 pixels wide,
a "sidebar" DIV which can be found along the left side of the container, and
a "content" DIV which fills up what's left of the right part of...
|
by: Heath |
last post by:
Is it proper to center images in a <div> by using the text-align: center
property? Or is there a better way?
|
by: red |
last post by:
How do I center two side by side divs ?
I've been writing css pages for a while but there's one thing tha still
eludes me.
I can center a div with margin auto.
I can place two divs side by side with float.
But I can't center two side by side divs.
If I float them and give them auto margins, the auto margins are ignored.
If I wrap the two floated divs in another div, the two divs have no
|
by: david hepworth |
last post by:
I am in the process of creating a CSS tab style thing for my webpage.
I have everything as i wish except that i cannot center the damn thing
in the page. I am hoping someone out there can help. I am sure that
it is a silly mistake but i have been staring at it for so long i am
going stir-crazy!
I have tried 'text-align: center;' in most parts of the CSS and in the
div in the HTML but it does not like it.
This is my CSS:...
| |
by: stevieg |
last post by:
I know this has been dealt with in previous posts, but i am having a problem with centering the following layout. Can anybody spot where I am going wrong? Thanks!
body {
text-align:center;
margin-left:auto;
margin-right:auto;
font-color:#ffffff;
}
#wrapper
|
by: rudicheow |
last post by:
SHORT VERSION
=============
I have a bunch of identical fixed-size single-celled tables that rest
against each other horizontally thanks to "float:left". These tables
are dynamically generated and the number of them can vary greatly. They
are all contained within a parent table cell, which is centred on the
page. But I am unable to find a way of centering these table cells
within the parent cell.
|
by: stevedude |
last post by:
CSS newbie again. I have a problem trying to get coffee mug images
within anchor tags to center with my link text for a vertical list
menu. If I use the horizontal/vertical properties of "background" or
"background-image", the positioning only works with specifying
pixels.
If I specify the vertical position in pixels, the image gets cut-off
at the bottom. I don't know what to do and would appreciate anyone's
help. Specifically the code...
|
by: issentia |
last post by:
I'm working on this site:
http://www.essenceofsoy.com/redesign/index2.html
and I'm having a few problems with getting the layout exactly right.
1) When the menu items are rolled over, they cannot be clicked as links unless the mouse pointer is below the word. This happens in both Firefox and IE6.
2) In Firefox, the pink quote banner and two gray form boxes above and below the content aren't centered in the "content" div, and I can't...
|
by: =?Utf-8?B?ZnJhbmt5?= |
last post by:
Hello,
I've created a table that has two rows that are span across three columns.
The third row has three columns, each with an image. The last row is also
span accross three columns. The span rows are centering their data.
however, the row with three columns, each with images (myimages1-3) are not
centering with the rest of the table. Any idea why?
Thanks in advance!
|
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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look !
Part I. Meaning of...
| |
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: 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...
|
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...
|
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...
| |