(Nieuwe) CSS-property werkt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

George van Baasbank

George van Baasbank

09/03/2015 16:57:32
Quote Anchor link
Hallo allemaal,

Onderstaand probeersel krijg ik niet werkend:

HTML-code:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<div id="afb">
   <img src="<?php echo $rowAgenda['poster'] ; ?>" style="max-width: 100%; max-height: 100px;" />
</div>


Bijbehorend CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
div#afb {
    display: flex;        
    align-items: center;
    display: -webkit-flex; /* Safari */
    -webkit-align-items: center; /* Safari 7.0+ */
}


De CSS-code vond ik op w3schools.
Volgens mij is deze functie bedoeld om bijv. een afbeelding te centreren maar bij mij gebeurt dit niet.

Ik gebruik IE-11 als browser en die zou ondersteund zijn
Ik heb het idee dat het een geheel nieuwe property is.
Heeft iemand hier ervaring mee?
Gewijzigd op 09/03/2015 16:58:51 door George van Baasbank
 
PHP hulp

PHP hulp

07/05/2021 08:07:54
 
Eddy E

Eddy E

09/03/2015 17:34:29
Quote Anchor link
Je weet zeker dat je maar één keer dit ID gebruikt?
Want het zou moeten werken. Geef je <div> eens een border: 1px solid red; en kijk dan of deze wel goed staat (breedte etc).
Daarnaast zou het wellicht handig zijn om een breedte op te geven, zodat centreren ook nut heeft.

En persoonlijk zou ik de laatste 2 regels (voor Safari) weglaten. Deze eerder zal Safari een standaard moeten gaan ondersteunen.

Toevoeging op 09/03/2015 18:18:33:

Het werkt perfect: http://codepen.io/anon/pen/WbgaoN

Het centreert het verticaal. Wilde je dit niet?
 
George van Baasbank

George van Baasbank

09/03/2015 20:13:07
Quote Anchor link
Eddy,
1. Ik ga e.e.a. Proberen
2. Ik had verwacht dat er horizontaal werd gecentreerd. Daar ben ik op zoek naar.
 
Eschwin Moerkerken

Eschwin Moerkerken

13/03/2015 12:30:11
Quote Anchor link
Hallo George van Baasbank,

De manier die ik gebruik om elementen te centreren binnen de parent:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
margin: 0 auto;
display: block;


http://codepen.io/anon/pen/NPOeBB
Gewijzigd op 13/03/2015 12:39:07 door Eschwin Moerkerken
 



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.