Known Participant

Answered

Center div's in div

12 replies
1001 views
Translate

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 is closed to new replies. Start a new post to keep the conversation going.

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.

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.

Translate

M

MobosAuthor

Known Participant

Sorry, thought I replied but not

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

Translate

M

MobosAuthor

Known Participant

Sorry, what is OP?

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

Translate

hans-g.

Legend

Hi Mobos,

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

Hans-Günter

Translate

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;

}

Translate

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

Translate

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.

Translate

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.