13 replies [Last post]
benny
Offline
Enthusiast
Last seen: 14 years 50 weeks ago
Joined: 2004-08-24
Posts: 64
Points: 0

Hi there!

I want to make something quite easy, but it doesn't work so i need a lttlebit of your help ^^

All i want to do is make a big div which contains other div's - but this other div's should be centerd.

I thougt i can just make a div, give a text-align:center to it and thats it. Well, it works for normal text, but the divs are still left-aligend. (But surprise - in IE it works fine...)

Here's the code

<div style="text-align:center; width: 500px; height: 100px; border: 1px solid red; ">
<div style="width: 80px; ">test</div>
</div>

I hope you can explain this to me..
Thank you very much,
greets,
ben

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Re: Centered divs in a div (probs with FireFox)

<div style="text-align:center; width: 500px; height: 100px; border: 1px solid red; ">
<div style="width: 80px; ">test</div>
</div>

Text align: center; is for text, not divs Laughing out loud

Try this:

<div style="text-align:center; width: 500px; height: 100px; border: 1px solid red; ">
<div style="width: 80px; margin: auto; ">test</div>
</div>

the margin: auto should center it.

Verschwindende wrote:
  • CSS doesn't make pies

benny
Offline
Enthusiast
Last seen: 14 years 50 weeks ago
Joined: 2004-08-24
Posts: 64
Points: 0

Re: Centered divs in a div (probs with FireFox)

Hey thepineapplehead, thx for your answer!

Quote:

Text align: center; is for text, not divs Laughing out loud

Hm, that even sounds logic to me...

the next problem:
I want to center up to 5 divs in the centered one - but with this methid the inner divs do not display parallel, but among each other.

I tried to float the inner divs, but then of course they are left-aligned again.

Could you help me again please and give me tip ?
thx again,
greets ben

thepineapplehead wrote:
<div style="text-align:center; width: 500px; height: 100px; border: 1px solid red; ">
<div style="width: 80px; ">test</div>
</div>

Text align: center; is for text, not divs Laughing out loud

Try this:

<div style="text-align:center; width: 500px; height: 100px; border: 1px solid red; ">
<div style="width: 80px; margin: auto; ">test</div>
</div>

the margin: auto should center it.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Centered divs in a div (probs with FireFox)

Could you show us an image of what you're trying to accomplish?

Verschwindende wrote:
  • CSS doesn't make pies

benny
Offline
Enthusiast
Last seen: 14 years 50 weeks ago
Joined: 2004-08-24
Posts: 64
Points: 0

Centered divs in a div (probs with FireFox)

Hey!

of course, look here please:

http://www.shs-it.de/wirtschaftsportal/branchenverzeichnis/branchen_index.php

At the top of the middle you can see 4 pics, this are the sponsors.
Sometimes there are less then 4 sponsors, and thats why Ii want to center them in the sponsor div. (it looks ugly if there are only 2 sponsors and they are left-aligned...)

I hope my problem is clear,
thx,
greets ben

binarywebs
Offline
Regular
Sheffield
Last seen: 17 years 3 weeks ago
Sheffield
Joined: 2005-09-12
Posts: 20
Points: 0

Centered divs in a div (probs with FireFox)

What about just putting a <center> tag around all of the inner divs.

thepineapplehead
thepineapplehead's picture
Offline
Moderator
Last seen: 22 weeks 5 days ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9683
Points: 819

Centered divs in a div (probs with FireFox)

binarywebs wrote:
What about just putting a <center> tag around all of the inner divs.

Ooooh, we don't use the <center> tag now do we?

(No.)

Unfortunately you need a few divs:

<div id="sponsors">
<div id="images">
<img 1>
<img2>
</div>
</div>

#sponsors {
width: xxxpx;
text-align: center
etc
}

#images {
width: auto;
margin: auto;
}

Verschwindende wrote:
  • CSS doesn't make pies

benny
Offline
Enthusiast
Last seen: 14 years 50 weeks ago
Joined: 2004-08-24
Posts: 64
Points: 0

Centered divs in a div (probs with FireFox)

Hi,

here I am again...

thepineapplehead, the problem with your solution is that you only center images...but under every image must stand the name of the sponsor...

so I need centerd div's, not only imagse...

Have you any other ideea ??
thx a lot,
greets ben

benny
Offline
Enthusiast
Last seen: 14 years 50 weeks ago
Joined: 2004-08-24
Posts: 64
Points: 0

Centered divs in a div (probs with FireFox)

Hi there again,

since there's no proper answer, and I spent really much time on this problem, I try it again and ask here for a solution.

Can it be so hard to center some DIV's within another DIV ??

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Centered divs in a div (probs with FireFox)

You could put your images and their captions in a definition list, e.g.

<dl>
<dt><img1 /></dt>
<dd>caption1</dd>
<dt><img2 /></dt>
<dd>caption2</dd>
<dt><img2 /></dt>
<dd>caption2</dd>
</dl>

Float your dt & dd elements left, add text-align: center to both and give them a width so that they all fit on the one line.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

flipkick
Offline
newbie
Last seen: 16 years 50 weeks ago
Joined: 2005-10-18
Posts: 2
Points: 0

same same

another description of the actual problem.

"hi ben Wink "

Because it serves perfectly well for illustration the thing I'm talking
about I used the html/css from
this post "http://archivist.incutio.com/viewlist/css-discuss/47685".
Hopefully the butcher won't show up and kill me Wink

So, here it comes:

http://www.xworld2000.de/centerimg/index.html

this page show's you two boxes. the purpose is to show an image with
additional text underneath.
this works fine this far.

so when it comes to center this two boxes, the trouble starts.

In the end, I dont know how many boxes like this i will have on the
page. But I know for sure, that
no matter how many of them ( presumably it won't be 1000 ) they HAVE TO
CENTER in the containing box.

As soon as the "float" element comes up, it gets impossible for me to
center them. Maybe you
guys have an idea.

To sum things up, here is a grafic that illustrates, what I want to
have. the number of boxes is like i said,
variable. There could be 2 or 4. Don't know. but they have to center in
the box which is their parent.
that parent can have a fixed width !

http://www.xworld2000.de/centerimg/center.gif

Honestly,

Felix B.

[email protected]
portrix.net software production

flipkick
Offline
newbie
Last seen: 16 years 50 weeks ago
Joined: 2005-10-18
Posts: 2
Points: 0

Centered divs in a div (probs with FireFox)

Maybe this link will help ?

http://www.brunildo.org/test/index.html

:roll:

rmfred
rmfred's picture
Offline
Elder
Rock Springs, WY
Last seen: 3 years 51 weeks ago
Rock Springs, WY
Timezone: GMT-6
Joined: 2004-01-31
Posts: 1073
Points: 31

Centered divs in a div (probs with FireFox)

This will center your images... not sure what to do with your text yet however.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Centered divs in a div</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
<!--


#BlockWrapper {background:yellow; 
margin: 0;
padding: 5px 1em;
width: 100%;
text-align: center;
color: black;
font-size: 10pt;
font-family: Georgia, Times, "Times New Roman", serif;
min-width: 760px;}

#BlockCenter {background:aqua; 
padding: 0;
width: auto;
margin-right: auto;
margin-left: auto;}

.BlockContainer {margin-right: auto; 
margin-left: auto;
display:inline;
width: 140px;
margin: 15px 2px;
padding: 0;
background-color: #fff;
border: 1px solid black;}

-->
</style>

</head>

<body>

<div id="BlockWrapper"> 
<div id="BlockCenter">

<div class="BlockContainer">
<a href="#/"><img src=".." alt="..." title="..." width="136" height="98" border=0></a></div>

<div class="BlockContainer"><a href="#/"><img src=".." alt="..." title="..." width="136" height="98" border=0></a></div> 

<div class="BlockContainer"><a href="#/"><img src=".." alt="..." title="..." width="136" height="98" border=0></a></div> 

</div>
</div>
</body>
</html>

Day
Day's picture
Offline
Enthusiast
Texas
Last seen: 16 years 51 weeks ago
Texas
Timezone: GMT-6
Joined: 2005-10-07
Posts: 103
Points: 0

Centered divs in a div (probs with FireFox)

If you don't like, or can't get to work, the definition list idea, then you might try this:

Put each image/caption pair in a div that will center the text under the pic. Then put all of those divs in a div with the auto margins and then put all that in your sponsors div. Like this:

<div id="sponsors">
<div id="centering-wrapper">

<div class="sponsor-pic">
<img ...etc/>
<p>caption here</p>
</div>

<div class="sponsor-pic>
<img ...etc/>
<p>another caption</p>
</div>

</div> <!-- End centering-wrapper -->
</div> <!-- End sponsors -->

I'll leave the CSS as an exercize for the reader. You should be able to figure it out from the above posts.

->Day<-