PDA

View Full Version : float:center

angiras
05-07-2003, 07:24 AM
how could you do something like a float:center ?

an image im the middle of a text ?

thank you
cg9com
05-07-2003, 09:01 AM
text-align:center; will align inline elements i believe. :)
angiras
05-07-2003, 09:30 AM
no it doesn't work


<?xml version="1.0" encoding="iso-8859-1"?>
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<title>page template</title>
<meta name='keywords' content='' />
<meta name='description' content='' />
<meta name="robots" content="index,follow" />
<link type="text/css" rel="stylesheet" href="styles/template.css" media="all" />
</head>
<body>
<div style="text-align:center;width:300px;height:300px;">content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content <img src="image.png" style="width:60px;height:60px;margin:4px;" alt="" />content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content content </div>
</body>
</html>


the picture doesn't float center
jkd
05-07-2003, 11:41 AM
margin-left: auto;
margin-right: auto;

Or you can shortcut margin: 0 auto; if you know there won't be any vertical margins.
mouse
05-07-2003, 11:44 AM
Er, I think he wants the text to wrap around the image. I don't think it's possible to have the image central, only to the left or right.
angiras
05-07-2003, 01:17 PM
I am just missing a float:center

maybe with CSS3 ....
ronaldb66
05-07-2003, 01:37 PM
Nor the present (1 & 2), neither the future (3) version of CSS offer a way to float elements to center. Since most uses involve wrapping text around a floating element, this makes sense since wrapping text around both sides of a centered floating element would make it very hard to determine how this should be done: splitting lines in the middle? Hard to render indeed.

As an alternative you could split up the text into two columns, center the image (using margin-left / -right: auto and text-align: center for IE) and float the text boxes around thát left and right, respectively; this would make more sense anyway.
angiras
05-07-2003, 02:46 PM
yes I can turn around of course, it was just an idea ...


thanks
Catman
05-07-2003, 03:38 PM
Something like this will approximate float center:
<div style="float : right; width : 30%;">Right Column</div>
<div style="float : left; width : 30%;">Left Column</div>
<div>Middle Column</div>Note that you don't specify a width for the middle div -- that allows it to fully expand to fill the available space. This works with Windows versions of IE 6, Netscape 6.2+, Mozilla 1.3, and Opera 7.1.

In the case at hand, if you specify text-align : center for the middle div and drop in the image, that results in an image centered between two columns of text. However, this does not work with Netscape 7.02, even if the height of the div is specified. It does work with the other browsers listed.
angiras
05-07-2003, 03:53 PM
yes but you need up and down

<div >Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column Up Column </div>
<div style="float : right; width : 30%;">Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column Right Column </div>
<div style="float : left; width : 30%;">Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column Left Column v</div>
<div style="color : red; "> Middle Column Middle Column Middle Column Middle Column Middle Column Middle Column Middle Column </div>
<div >Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column Down Column </div>


and it is very difficult to cut a text in 4 parts



thank you
angiras
05-07-2003, 03:56 PM
I have not tried Netscape 7.02, !! is ther a few problem again with netscape !

all is fine for the moment with opera 7 mozilla IE and N6

I have just noticed a big bug with OPera 7.10 it crash totally
but nobody could tell me why !