So i have this page where there are services displayed like boxes, on big screens I want 3 of those boxes next to each other. when the browser gets smaller I want fewer boxes next to each other (centered), until they are just stacked upon each other. but they won't center when I stack them.
.diensten {
margin-top: 90px;
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
}
#dienst1 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst2 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst3 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst4 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst5 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst6 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst7 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst8 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst9 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img{
position: relative;
display: block;
margin: auto;
width: 450px;
height: 330px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst4 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst5 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst6 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst7 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst8 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst9 img{
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
.diensten {
margin-top: 90px;
}
#dienst1, #dienst2, #dienst3, #dienst4, #dienst5, #dienst6, #dienst7, #dienst8, #dienst9 {
width: 460px;
margin-left: auto;
margin-right: auto;
}
#dienst1 img, #dienst2 img, #dienst3 img, #dienst4 img, #dienst5 img, #dienst6 img, #dienst7 img, #dienst8 img, #dienst9 img {
visibility: hidden;
}
}
/* Small phones, iPhone Retina */
#media only screen and (max-width : 320px) {
.diensten {
position: absolute;
left: 50px;
}
#dienst1, #dienst2, #dienst3, #dienst4, #dienst5, #dienst6, #dienst7, #dienst8, #dienst9 {
margin-top: 90px;
width: 315px;
height: 510px;
margin-left: auto;
margin-right: auto;
}
#dienst9 {
height: 680px;
}
#dienst1 img, #dienst2 img, #dienst3 img, #dienst4 img , #dienst5 img , #dienst6 img , #dienst7 img, #dienst8 img, #dienst9 img {
visibility: hidden;
}
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
<div id="dienst4">
<h2>Legionellabeheer</h2>
<p>Wij verzorgen het legionellabeheer vanuit het legionellabeheersplan voor zorginstellingen, sportverenigingen, hotels en indien van toepassing voor onderwijsinstellingen. De beheerderstaken bestaan onder andere uit het beheer van het logboek, de maandelijkse temperatuurmeting van risico tappunten, de halfjaarlijkse en jaarlijkse bemonstering volgens het beheersplan, preparatie maatregelen n.a.v. een besmetting, preventief spoelen/verversen en thermisch desinfecteren volgens het legionella beheersplan.</p>
</div>
<div id="dienst5">
<h2>Alarmsysteem</h2>
<p>Wij verzorgen uw alarmsysteem. Steeds meer bedrijven en huishoudens in Nederland krijgen te maken met ongewenst bezoek op elk denkbaar tijdstip van de dag. Bescherming van uw bedrijf of huis en inboedel d.m.v. elektronische systemen is tegenwoordig geen overbodige luxe, maar is een noodzakelijk kwaad is geworden. Ook installeren wij brand en ontruimings installaties welke gecertificeerd kunnen worden opgeleverd. </p>
</div>
<div id="dienst6">
<h2>BHV trainingen</h2>
<p>Wij verzorgen uw BHV trainingen. Sinds 1994 eist de Arbowet dat elke werkgever de veiligheid van medewerkers, klanten en andere aanwezigen kan garanderen door het aanstellen van één of meerdere BHVer(s). Het aanstellen van een Bedrijfshulpverlener helpt de veiligheid in een bedrijf te vergroten. Een BHV-er is opgeleid en verantwoordelijk voor het verlenen van Eerste Hulp, het bestrijden van een beginnende brand en het begeleiden van een ontruiming.</p>
</div>
<div id="dienst7">
<h2>Veiligheidscheck</h2>
<p>Wij verzorgen een maandelijkse woningschouw van gebouwen en adviseren u over de wettelijke normen die toegepast moeten worden voor de verschillende overheidsinstanties. Uitvoer van risico-inventarisatie en evaluatie RI&E, keuren en verkopen van blusmiddelen, keuren en verkoop van noodverlichting, verzorging en verkoop van BHV koffers en overige veiligheidsmiddelen behoord tot de mogelijkheden.</p>
</div>
<div id="dienst8">
<h2>Toegangscontrole</h2>
<p>Wij verzorgen uw toegangscontrole. Doordat bedrijven goed zijn beveiligd tegen inbraak slaat de criminaliteit overdag tijdens openingstijden toe, het toepassen van toegangscontrole is daardoor enorm groeiend.
Afhankelijk van de individuele toepassingswens wordt een toegangscontrole systeem opgebouwd. De toepassingen zijn divers van standalone op één deur tot een netwerk van deuren op verschillende locaties die centraal gecontroleerd kan worden.
Elektronische cilinders kunnen worden gemonteerd op uw bestaande cilinder, nooit meer sleutels kwijt alleen de toegangspas of tac uitprogrammeren en het sleutelplan is weer sluitend.</p>
</div>
<div id="dienst9">
<h2>Inspectie brandmeldinstallatie</h2>
<p>Wij verzorgen uw inspecties. Bij de inspectie processen wordt vastgesteld of het brandbeveiligingssysteem voldoet aan de afgeleide doelstellingen. De inspectie bestaat uit administratieve, visuele en functionele waarnemingen conform NEN 2575. In de uitgangspunten zijn de afstemming van de techniek op de interne en externe alarmorganisatie en de bouwkundige maatregelen die de brandveiligheid waarborgt.
We gaan in Nederland steeds bewuster om met brandveiligheid en inspecties. De regels en het toezicht op naleving van de regels zijn de laatste jaren verder aangescherpt (Bouwbesluit 2012). Brandveiligheid is een zeer belangrijk aspect. Zo heeft de overheid voor de meeste installaties brandveiligheid voorwaarden gesteld voor het verlenen van een bouw- of milieuvergunning. Voor installaties die worden aangebracht op wens van een gebruiker/eigenaar worden door verzekeraars brandveiligheidvoorwaarden gesteld als onderdeel van een verzekeringscontract. </p>
</div>
</div>
The simplest way would be to use text-align: center on the parent, then reset the immediate children to text-align: left. I also adjusted the margin so there is a left/right margin of 45px on the children divs, instead of just a left margin of 90px.
.diensten {
margin-top: 90px;
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
text-align: center;
}
.diensten > div {
text-align: left;
margin: 90px 45px 0;
}
#dienst1 {
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst2 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst3 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst4 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst5 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst6 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst7 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst8 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst9 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img {
position: relative;
display: block;
margin: auto;
width: 450px;
height: 330px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst4 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst5 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst6 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst7 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst8 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst9 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */
#media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {}
/* Extra Small Devices, Phones */
#media only screen and (max-width: 480px) {
.diensten {
margin-top: 90px;
}
#dienst1,
#dienst2,
#dienst3,
#dienst4,
#dienst5,
#dienst6,
#dienst7,
#dienst8,
#dienst9 {
width: 460px;
margin-left: auto;
margin-right: auto;
}
#dienst1 img,
#dienst2 img,
#dienst3 img,
#dienst4 img,
#dienst5 img,
#dienst6 img,
#dienst7 img,
#dienst8 img,
#dienst9 img {
visibility: hidden;
}
}
/* Small phones, iPhone Retina */
#media only screen and (max-width: 320px) {
.diensten {
position: absolute;
left: 50px;
}
#dienst1,
#dienst2,
#dienst3,
#dienst4,
#dienst5,
#dienst6,
#dienst7,
#dienst8,
#dienst9 {
margin-top: 90px;
width: 315px;
height: 510px;
margin-left: auto;
margin-right: auto;
}
#dienst9 {
height: 680px;
}
#dienst1 img,
#dienst2 img,
#dienst3 img,
#dienst4 img,
#dienst5 img,
#dienst6 img,
#dienst7 img,
#dienst8 img,
#dienst9 img {
visibility: hidden;
}
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
<div id="dienst4">
<h2>Legionellabeheer</h2>
<p>Wij verzorgen het legionellabeheer vanuit het legionellabeheersplan voor zorginstellingen, sportverenigingen, hotels en indien van toepassing voor onderwijsinstellingen. De beheerderstaken bestaan onder andere uit het beheer van het logboek, de maandelijkse temperatuurmeting van risico tappunten, de halfjaarlijkse en jaarlijkse bemonstering volgens het beheersplan, preparatie maatregelen n.a.v. een besmetting, preventief spoelen/verversen en thermisch desinfecteren volgens het legionella beheersplan.</p>
</div>
<div id="dienst5">
<h2>Alarmsysteem</h2>
<p>Wij verzorgen uw alarmsysteem. Steeds meer bedrijven en huishoudens in Nederland krijgen te maken met ongewenst bezoek op elk denkbaar tijdstip van de dag. Bescherming van uw bedrijf of huis en inboedel d.m.v. elektronische systemen is tegenwoordig geen overbodige luxe, maar is een noodzakelijk kwaad is geworden. Ook installeren wij brand en ontruimings installaties welke gecertificeerd kunnen worden opgeleverd. </p>
</div>
<div id="dienst6">
<h2>BHV trainingen</h2>
<p>Wij verzorgen uw BHV trainingen. Sinds 1994 eist de Arbowet dat elke werkgever de veiligheid van medewerkers, klanten en andere aanwezigen kan garanderen door het aanstellen van één of meerdere BHVer(s). Het aanstellen van een Bedrijfshulpverlener helpt de veiligheid in een bedrijf te vergroten. Een BHV-er is opgeleid en verantwoordelijk voor het verlenen van Eerste Hulp, het bestrijden van een beginnende brand en het begeleiden van een ontruiming.</p>
</div>
<div id="dienst7">
<h2>Veiligheidscheck</h2>
<p>Wij verzorgen een maandelijkse woningschouw van gebouwen en adviseren u over de wettelijke normen die toegepast moeten worden voor de verschillende overheidsinstanties. Uitvoer van risico-inventarisatie en evaluatie RI&E, keuren en verkopen van blusmiddelen, keuren en verkoop van noodverlichting, verzorging en verkoop van BHV koffers en overige veiligheidsmiddelen behoord tot de mogelijkheden.</p>
</div>
<div id="dienst8">
<h2>Toegangscontrole</h2>
<p>Wij verzorgen uw toegangscontrole. Doordat bedrijven goed zijn beveiligd tegen inbraak slaat de criminaliteit overdag tijdens openingstijden toe, het toepassen van toegangscontrole is daardoor enorm groeiend.
Afhankelijk van de individuele toepassingswens wordt een toegangscontrole systeem opgebouwd. De toepassingen zijn divers van standalone op één deur tot een netwerk van deuren op verschillende locaties die centraal gecontroleerd kan worden.
Elektronische cilinders kunnen worden gemonteerd op uw bestaande cilinder, nooit meer sleutels kwijt alleen de toegangspas of tac uitprogrammeren en het sleutelplan is weer sluitend.</p>
</div>
<div id="dienst9">
<h2>Inspectie brandmeldinstallatie</h2>
<p>Wij verzorgen uw inspecties. Bij de inspectie processen wordt vastgesteld of het brandbeveiligingssysteem voldoet aan de afgeleide doelstellingen. De inspectie bestaat uit administratieve, visuele en functionele waarnemingen conform NEN 2575. In de uitgangspunten zijn de afstemming van de techniek op de interne en externe alarmorganisatie en de bouwkundige maatregelen die de brandveiligheid waarborgt.
We gaan in Nederland steeds bewuster om met brandveiligheid en inspecties. De regels en het toezicht op naleving van de regels zijn de laatste jaren verder aangescherpt (Bouwbesluit 2012). Brandveiligheid is een zeer belangrijk aspect. Zo heeft de overheid voor de meeste installaties brandveiligheid voorwaarden gesteld voor het verlenen van een bouw- of milieuvergunning. Voor installaties die worden aangebracht op wens van een gebruiker/eigenaar worden door verzekeraars brandveiligheidvoorwaarden gesteld als onderdeel van een verzekeringscontract. </p>
</div>
</div>
But personally I would use flex with flex-wrap: wrap; justify-content: center on the parent to create rows that wrap and center horizontally.
.diensten {
margin-top: 90px;
position: absolute;
display: inline-block;
height: 500px;
background-color: #FFFFFF;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.diensten > div {
margin: 90px 45px 0;
}
#dienst1 {
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst2 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst3 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst4 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst5 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst6 {
margin-top: 200px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst7 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst8 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst9 {
margin-top: 90px;
margin-left: 90px;
position: relative;
display: inline-block;
height: 500px;
width: 500px;
box-shadow: 0px 0px 30px 0px #000;
vertical-align: top;
}
#dienst1 img {
position: relative;
display: block;
margin: auto;
width: 450px;
margin-top: 100px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst2 img {
position: relative;
display: block;
margin: auto;
width: 450px;
height: 330px;
margin-top: 30px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst3 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst4 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst5 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst6 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst7 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst8 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#dienst9 img {
margin: auto;
height: 330px;
width: 450px;
margin-top: 50px;
box-shadow: 0px 0px 20px 0px #000;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
/* Large Devices, Wide Screens */
#media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */
#media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */
#media only screen and (max-width: 768px) {}
/* Extra Small Devices, Phones */
#media only screen and (max-width: 480px) {
.diensten {
margin-top: 90px;
}
#dienst1,
#dienst2,
#dienst3,
#dienst4,
#dienst5,
#dienst6,
#dienst7,
#dienst8,
#dienst9 {
width: 460px;
margin-left: auto;
margin-right: auto;
}
#dienst1 img,
#dienst2 img,
#dienst3 img,
#dienst4 img,
#dienst5 img,
#dienst6 img,
#dienst7 img,
#dienst8 img,
#dienst9 img {
visibility: hidden;
}
}
/* Small phones, iPhone Retina */
#media only screen and (max-width: 320px) {
.diensten {
position: absolute;
left: 50px;
}
#dienst1,
#dienst2,
#dienst3,
#dienst4,
#dienst5,
#dienst6,
#dienst7,
#dienst8,
#dienst9 {
margin-top: 90px;
width: 315px;
height: 510px;
margin-left: auto;
margin-right: auto;
}
#dienst9 {
height: 680px;
}
#dienst1 img,
#dienst2 img,
#dienst3 img,
#dienst4 img,
#dienst5 img,
#dienst6 img,
#dienst7 img,
#dienst8 img,
#dienst9 img {
visibility: hidden;
}
}
<div class="diensten">
<div id="dienst1">
<h2>Ontruimingsoefening</h2>
<p>Wij verzorgen diverse ontruimingsoefeningen die afgestemd zijn op zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden en detailhandel. De ontruimingsoefeningen kunnen zowel theoretisch (Table Top) als praktisch toegepast worden waarbij wij gebruik maken van professionele hulpmiddelen om de ontruimingsoefening zo realistisch mogelijk te maken.</p>
<img src="Foto's/IMG_2670.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst2">
<h2>Beheer brandmeldinstallatie</h2>
<p>Wij verzorgen de verplichte maandelijkse en viermaandelijkse beheerderstaken van de brandmeldinstallatie conform NEN 2654 op professionele wijze voor zorginstellingen, onderwijsinstellingen, kinderdagverblijven, horecagelegenheden, kantoorgebouwen en detailhandel. Het onderhoud van de brandmeldinstallatie bestaat uit het testen van de doormelding naar de brandweer van automatische rookmelders en handbrandmelders, het testen van de doormelding van storingen aan de brandmeldinstallatie, een visuele controle van de aangesloten componenten, het bijwerken en onderhouden van het logboek.</p>
<img src="Foto's/IMG_2704.JPG" data-tilt data-tilt-max="30" data-tilt-speed="400" data-tilt-perspective="900">
</div>
<div id="dienst3">
<h2>Camerabeveiliging</h2>
<p>Wij verzorgen uw camera beveiliging. Registratie wat er in en rond uw pand gebeurt, het kan door middel van camera’s welke worden geprojecteerd in overleg, zodat de verzochte beelden kunnen worden opgeslagen op een harddisk recorder. Camera’s zijn er in diverse types. Voor de nachtelijke situatie kunnen er lampen worden geplaatst, ook zijn er camera’s welke in het donker automatisch overschakelen naar zwart-wit en doormiddel van ingebouwde infrarood verlichting nog uitstekend beeld geven. Tevens is het koppelen van camerabeelden met een Particuliere Alarmcentrale mogelijk.</p>
</div>
<div id="dienst4">
<h2>Legionellabeheer</h2>
<p>Wij verzorgen het legionellabeheer vanuit het legionellabeheersplan voor zorginstellingen, sportverenigingen, hotels en indien van toepassing voor onderwijsinstellingen. De beheerderstaken bestaan onder andere uit het beheer van het logboek, de maandelijkse temperatuurmeting van risico tappunten, de halfjaarlijkse en jaarlijkse bemonstering volgens het beheersplan, preparatie maatregelen n.a.v. een besmetting, preventief spoelen/verversen en thermisch desinfecteren volgens het legionella beheersplan.</p>
</div>
<div id="dienst5">
<h2>Alarmsysteem</h2>
<p>Wij verzorgen uw alarmsysteem. Steeds meer bedrijven en huishoudens in Nederland krijgen te maken met ongewenst bezoek op elk denkbaar tijdstip van de dag. Bescherming van uw bedrijf of huis en inboedel d.m.v. elektronische systemen is tegenwoordig geen overbodige luxe, maar is een noodzakelijk kwaad is geworden. Ook installeren wij brand en ontruimings installaties welke gecertificeerd kunnen worden opgeleverd. </p>
</div>
<div id="dienst6">
<h2>BHV trainingen</h2>
<p>Wij verzorgen uw BHV trainingen. Sinds 1994 eist de Arbowet dat elke werkgever de veiligheid van medewerkers, klanten en andere aanwezigen kan garanderen door het aanstellen van één of meerdere BHVer(s). Het aanstellen van een Bedrijfshulpverlener helpt de veiligheid in een bedrijf te vergroten. Een BHV-er is opgeleid en verantwoordelijk voor het verlenen van Eerste Hulp, het bestrijden van een beginnende brand en het begeleiden van een ontruiming.</p>
</div>
<div id="dienst7">
<h2>Veiligheidscheck</h2>
<p>Wij verzorgen een maandelijkse woningschouw van gebouwen en adviseren u over de wettelijke normen die toegepast moeten worden voor de verschillende overheidsinstanties. Uitvoer van risico-inventarisatie en evaluatie RI&E, keuren en verkopen van blusmiddelen, keuren en verkoop van noodverlichting, verzorging en verkoop van BHV koffers en overige veiligheidsmiddelen behoord tot de mogelijkheden.</p>
</div>
<div id="dienst8">
<h2>Toegangscontrole</h2>
<p>Wij verzorgen uw toegangscontrole. Doordat bedrijven goed zijn beveiligd tegen inbraak slaat de criminaliteit overdag tijdens openingstijden toe, het toepassen van toegangscontrole is daardoor enorm groeiend.
Afhankelijk van de individuele toepassingswens wordt een toegangscontrole systeem opgebouwd. De toepassingen zijn divers van standalone op één deur tot een netwerk van deuren op verschillende locaties die centraal gecontroleerd kan worden.
Elektronische cilinders kunnen worden gemonteerd op uw bestaande cilinder, nooit meer sleutels kwijt alleen de toegangspas of tac uitprogrammeren en het sleutelplan is weer sluitend.</p>
</div>
<div id="dienst9">
<h2>Inspectie brandmeldinstallatie</h2>
<p>Wij verzorgen uw inspecties. Bij de inspectie processen wordt vastgesteld of het brandbeveiligingssysteem voldoet aan de afgeleide doelstellingen. De inspectie bestaat uit administratieve, visuele en functionele waarnemingen conform NEN 2575. In de uitgangspunten zijn de afstemming van de techniek op de interne en externe alarmorganisatie en de bouwkundige maatregelen die de brandveiligheid waarborgt.
We gaan in Nederland steeds bewuster om met brandveiligheid en inspecties. De regels en het toezicht op naleving van de regels zijn de laatste jaren verder aangescherpt (Bouwbesluit 2012). Brandveiligheid is een zeer belangrijk aspect. Zo heeft de overheid voor de meeste installaties brandveiligheid voorwaarden gesteld voor het verlenen van een bouw- of milieuvergunning. Voor installaties die worden aangebracht op wens van een gebruiker/eigenaar worden door verzekeraars brandveiligheidvoorwaarden gesteld als onderdeel van een verzekeringscontract. </p>
</div>
</div>