Centreren van divs wil niet lukken

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- SanThe -

- SanThe -

17/11/2014 23:21:10
Quote Anchor link
Hallo,

Ik heb een div waar de tekst in het midden staat (margin:auto). Prima.
Nu wil ik in die div twee andere divs zetten, maar achter elkaar.
Ze staan nu mooi in het midden, maar onder elkaar.
Geef ik een float:left mee dan staan ze links, maar weer wel achter elkaar.

Hoe krijg ik ze nou in het midden en ook achter elkaar?

SanThe
Gewijzigd op 17/11/2014 23:22:09 door - SanThe -
 
PHP hulp

PHP hulp

23/02/2024 21:58:37
 
Php knipper

php knipper

17/11/2014 23:24:23
Quote Anchor link
en als je in de plaats van <div> gebruik maakt van <span>
 
- SanThe -

- SanThe -

17/11/2014 23:28:43
Quote Anchor link
Dan worden ze 100% breed (waarom?) en dus onder elkaar.
 
Wouter Van Marrum

Wouter Van Marrum

17/11/2014 23:49:34
Quote Anchor link
Is het niet slim om position absolute te zetten ?
daarna margins toevoegen ?
 
- SanThe -

- SanThe -

17/11/2014 23:52:49
Quote Anchor link
Nee, want het aantal divs die gecentreerd moeten worden varieert.
Het kunnen er ook 3, 4 of nog meer worden.
 
Wouter Van Marrum

Wouter Van Marrum

18/11/2014 00:17:57
Quote Anchor link
hmm, misschien via jquery ?
Dus bijv in je .container zitten 3 divs, via jquery het aantal div's laden met een speciale class ( voor nu .center ).
Dan zou je een loop kunnen uitvoeren en eventueel een addclass met position absolute en margin op % ?

Ben geen held in js maar ik denk dat het wel mogelijk is.
 
- SanThe -

- SanThe -

18/11/2014 00:21:02
Quote Anchor link
Ik probeer jquery juist te vermijden. Gebruik het nog steeds nooit.
Het moet toch gewoon met css kunnen lijkt mij.
 
Wouter Van Marrum

Wouter Van Marrum

18/11/2014 00:26:40
Quote Anchor link
1 class .centreren maken daar position absolute maken en margin in % zetten ?
alle divs in elkaar zetten gok ik anders zul je niks aan position niks hebben denk ik.
Verder zou ik het dan niet weten. ( ga ook naar bed nu, trusten !)
 
Frank Nietbelangrijk

Frank Nietbelangrijk

18/11/2014 00:31:36
Quote Anchor link
Je vergeet te clearen denk ik?
 
- SanThe -

- SanThe -

18/11/2014 00:33:15
Quote Anchor link
Ik moet juist niet clearen want ze moeten achter elkaar.
Maar dan in het midden,
 
Frank Nietbelangrijk

Frank Nietbelangrijk

18/11/2014 00:58:37
Quote Anchor link
Moet je gewoon met een list werken. Je mag volgens Wouter ook div's in de list plaatsen.

Ik heb nu dit: http://codepen.io/anon/pen/XJWvBV
 
G P

G P

18/11/2014 12:20:10
Quote Anchor link
De div's als "display: inline-block;" of "display: inline;"

http://codepen.io/anon/pen/Kwwwmz
Gewijzigd op 18/11/2014 12:24:55 door G P
 
Frank Nietbelangrijk

Frank Nietbelangrijk

18/11/2014 14:16:43
Quote Anchor link
Top GP, nette oplossing :-)
 
Eddy E

Eddy E

18/11/2014 19:15:59
Quote Anchor link
- SanThe - op 18/11/2014 00:21:02:
Ik probeer jquery juist te vermijden. Gebruik het nog steeds nooit.
Het moet toch gewoon met css kunnen lijkt mij.


Uiteraard!
Daar is CSS voor.

Enkele tips:
- display: table-cell;

Op je gecentreerde <div> (waar alles in komt): iets als display: table-row; ?
Zo gebruik je gewoon je <div>'s als tabel, wat schitterend werkt en helemaal goed is :D
 
Ger van Steenderen
Tutorial mod

Ger van Steenderen

18/11/2014 19:39:34
Quote Anchor link
En als alle browsers dan ook nog hetzelfde zouden reageren, dan was de wereld helemaal mooi!
 
- SanThe -

- SanThe -

19/11/2014 17:08:49
Quote Anchor link
Allen bedankt voor de hulp.

Wat blijkt nou: Het was een kleinigheid.
Al met al een aardige tijd zitten klooien.

Ik had display:inline; en geen display:inline-block;
Geheel over het hoofd gezien.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.