Known Participant

Answered

Center div's in div

Forum|Forum|9 years ago
February 1, 2017
3 replies
956 views

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

This topic has been closed for replies.

Correct answer Gerwinmorren

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.

G

GerwinmorrenCorrect answer

Participant

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.

M

MobosAuthor

Known Participant

Sorry, thought I replied but not

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

M

MobosAuthor

Known Participant

Sorry, what is OP?

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

hans-g.

Legend

Hi Mobos,

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

Hans-Günter

O

osgood_

Legend

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

<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

Community Expert

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

Nancy O'Shea— Product User & Community Expert

O

osgood_

Legend

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded