Center div's in div

[Mobos]

It must be very simple, but I can't find how to center my 5 div's in the parent div. Searched the web and this forum, tried everything, but obviously I'm doing something wrong.

FITTRIXX :: Strength, voor optimaal trainingsresultaat

[osgood_]

First make a back-up of your page and css then remove ALL instances of 'fluid' from your mark-up for the <divs>:

<div id="toestel" class="Black">

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0510.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0496.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0526.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0545.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0578.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0582.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0609.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0624.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0640.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0693.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0711.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0725.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0737.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0760.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0772.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0802.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0838.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0878.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0877.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0891.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0892.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0915.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0936.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0932.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

<div class="Toestel"><img src="imgs/gallerij2017-thumbs/_MG_0947.jpg" alt=""/><p> </p>Toestelnaam<p> </p><a href="FITTRIXX-Strength-01.html" class="button">MEER INFO</a></div>

</div>

Then add the below to your stylesheet.

#toestel {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

}

[Nancy OShea]

As you no doubt know, the OP is using Fluid Grid Layouts (floats).  And Flexbox is a big departure from that.

Not that I have any love for legacy (now deprecated in CC 2017) Fluid Grid Layouts mind you.  But the Flexbox approach may need a little explanation.

Nancy

[osgood_]

Nancy OShea wrote:

As you no doubt know, the OP is using Fluid Grid Layouts (floats). And Flexbox is a big departure from that.

Not that I have any love for legacy (now deprecated in CC 2017) Fluid Grid Layouts mind you. But the Flexbox approach may need a little explanation.

Nancy

Yes, OP will most likely have to re-think workflow quite soon if they want to keep up with current responsive trends/software applications.

The Flexbox solution should work as the DW fluid grid stuff is not affected.

[Mobos]

Sorry, what is OP?

I have the newest version of Dreamweaver, isn't that o.k.?

[hans-g.]

Hi Mobos,

in this case, the "OP" is you, the "Original Poster" >>> see Wiki: Internet forum - Wikipedia

Hans-Günter

[osgood_]

Mobos wrote:

Sorry, what is OP?

I have the newest version of Dreamweaver, isn't that o.k.?

Original Poster (OP)

Fluid Grids in the newest version of DW have been deprecated. That means they have been left to die, no longer supported as it was a failed attempt at a responsive solution. Which means you can keep using them in your workflow  until DW drops them completely at which stage you are left with an old version of DW or you can begin to investigate methods which have a longer life span.

[Jon Fritz]

Fluid Grid Layouts have been completely removed from DW CC2017.

All creation functionality, as well as the guides in Live View, have all been removed AND you still can't use Design View with them without the css file hack.

[osgood_]

Jon Fritz II wrote:

Fluid Grid Layouts have been completely removed from DW CC2017.

All creation functionality, as well as the guides in Live View, have all been removed AND you still can't use Design View with them without the css file hack.

It's worse than I thought or better, depending on your view in regards to Fluid Grids.

[pziecina]

osgood_ wrote:

Jon Fritz II wrote:

Fluid Grid Layouts have been completely removed from DW CC2017.

All creation functionality, as well as the guides in Live View, have all been removed AND you still can't use Design View with them without the css file hack.

It's worse than I thought or better, depending on your view in regards to Fluid Grids.

It's worse than you thought, especially when one considers that flexbox was available across browsers when fluid grids was developed, and a polyfill for IE9 and below.

[Jon Fritz]

I figured I would update my previous post...

I was fiddling around with a Fluid Grid Layout and the guides, magically reappeared in CC2017.

They weren't there when I posted originally. They weren't there while working in the file, saving and testing things out, but they're back now and I didn't even restart the program.

Still can't actually make FGLs or work from Design View with them, but the Live View column guides, apparently, still exist.

[Gerwinmorren · Accepted solution]

You should use the display: flex; function as descriped above. if thats not working.

Try to get  a container around your divisions, give that object a width of 90% or smaller. And give that a margin:auto style; The divisions inside the container will be  automaticly centered.

I hope you understand me, otherwise send me a pm.

Good luck.

[Mobos]

Sorry, thought I replied but not

Think this is better now FITTRIXX :: Strength, voor optimaal trainingsresultaat