Website centreren met margin: 0 auto; werkt niet

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Typescript Developer / Cloud platform/ 3.500 euro

Functieomschrijving Ben jij een Typescript Developer en werk je graag aan innovatieve producten? Lees dan snel verder! (Door)Ontwikkelen van het cloud platform; (Door)Ontwikkelen van microservices; Bouwen van nieuwe functionaliteiten; Verbeteringen aandragen voor het cloud platform; Sparren met de business. Functie-eisen HBO werk- en denkniveau; Minimaal twee jaar ervaring met Typescript; Ervaring met scripttalen zoals Python en/of Powershell is een pre; Kennis van microservice development; Kennis van VMware producten, Azure, AWS en/of Google Cloud. Bedrijfsomschrijving Onze opdrachtgever, gevestigd in regio Eindhoven, levert een compleet dienstenpakket op het gebied van IT. Zij pakken verschillende (complexe) vraagstukken van grote organisaties op. De sfeer

Bekijk vacature »

Support Specialist met doorgroeimogelijkheden

Support Specialist met doorgroeimogelijkheden Amersfoort, Nederland __________________________________________________________________________ Functieomschrijving Je kerntaken bestaan uit het reageren op vragen van onze klanten op een tijdige en nauwkeurige manier via ons online supportsysteem, e-mail of telefoon. Klantenbehoeften identificeren en klanten helpen bij het gebruik van specifieke functies. Foutmeldingen analyseren en melden. In deze afwisselende functie heb je dagelijks contact met leveranciers, automatiseerders en retailers in de (non)food-, fashion- en doe-het-zelfbranche. Er zijn absoluut doorgroeimogelijkheden zodra je kennis van onze applicaties op het niveau is dat deze geen geheimen meer voor je hebben. Je staat sterk in je schoenen, onderscheidt hoofdzaken van bijzaken en weet

Bekijk vacature »

Louis Deconinck

Louis Deconinck

22/02/2016 10:46:02
Quote Anchor link
Ik probeer mijn website te centreren door in de container te werken met de margins, maar dit lukt niet. Hoe pak ik dit wel aan?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!doctype html>
<html>
<head>
<title>Mijn topboeken</title>
<style>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Oswald);

body {
font-family: 'Open Sans', sans-serif;
}

#container {
margin-left:auto;
margin-right:auto;
}

h1 {
font-family: 'Oswald', sans-serif;
font-size: 80px;
}

h2 {
margin-top: -40px;
}

.titelboek {
border-top: 2px solid black;
text-transform: uppercase;
font-size: 18px;
}

.auteur {
font-size: 12px;
}

.ranking {
font-family: 'Oswald', sans-serif;
background-color: black;
color: white;
height: 30px;
width: 30px;
border-radius: 15px;
text-align: center;
line-height: 30px;
white-space: nowrap;
}

#links {
float:left;
text-align: right;
border-right: 10px solid black;
padding-right: 20px;
}

#rechts {
padding-top: 175px;
text-align: left;
float: left;
padding-left: 20px;
}

.item {
height: 350px;
margin-top: 13px;
}

#links .ranking {
float: right;
margin-right: -40px;
margin-top: -15px;
}

#rechts .ranking {
float: left;
margin-left: -40px;
margin-top: -15px;
}

hr {
margin-top: -2px;
border: 0;
background: black;
width: 10px;
height: 2px;
}

#links hr {
float:right;
margin-right:-10px;
}

#rechts hr {
float:left;
margin-left:-10px;
}
</style>
</head>
<body>
 <div id="container">
  <h1>Topboeken</h1>
  <h2>- mijn top -</h2>
  <div id="tijdlijn">
   <div id="links">
    <div class="item">
     <div class="ranking">1</div>
     <hr>
     <span class="titelboek">Hoe word ik een speedboot?</span>
     <div class="auteur">Menno Lanting</div>
     <div class="cover"><img src="https://i.mgtbk.nl/boeken/9789047008897-240x300.jpg" height="300" /></div>
    </div>
    <div class="item">
     <div class="ranking">3</div>
     <hr>
     <span class="titelboek">Nooit af</span>
     <div class="auteur">Martijn Aslander & Erwin Witteveen</div>
     <div class="cover"><img src="https://i.mgtbk.nl/boeken/9789047009139-240x300.jpg?_=MAa8omBZ" height="300" /></div>
    </div>
   </div>
   <div id="rechts">
    <div class="item">
     <div class="ranking">2</div>
     <hr>
     <span class="titelboek">IK</span>
     <div class="auteur">Margriet Sitskoorn</div>
     <div class="cover"><img src="https://i.mgtbk.nl/boeken/9789462760356-240x300.jpg?_=BbXcTU8l" height="300" /></div>
    </div>
   </div>
  </div>
 </div>
</body>
</html>
 
PHP hulp

PHP hulp

20/10/2020 19:24:57
 
Jan de Laet

Jan de Laet

22/02/2016 11:00:54
Quote Anchor link
Moet je container dan ook niet een width meekrijgen?
 
Louis Deconinck

Louis Deconinck

22/02/2016 11:11:51
Quote Anchor link
Jan de Laet op 22/02/2016 11:00:54:
Moet je container dan ook niet een width meekrijgen?


Das misschien wel waar, maar die width weet ik niet op voorhand, aangezien dat afhankelijk is van de images. Bestaat er nog een andere manier om te centreren?
 
Jan de Laet

Jan de Laet

22/02/2016 12:04:20
Quote Anchor link
Je kunt dit eens proberen bij container:

position: absolute;
left: 25%;

Omdat links en rechts niet even groot zijn, komt het niet helemaal in het midden.
 
Yoop Overmaat

Yoop Overmaat

22/02/2016 13:03:00
Quote Anchor link
Een width is bij het centreren altijd nodig met een margin-left/right: auto; Een element een height meegeven zou ik doen omdat de weergave van het geheel in sommige gevallen er nogal krom uit komt te zien.
 
J opla

j opla

10/04/2016 23:06:21
Quote Anchor link
Volgens mij zou het zo ook moeten lukken, maar binnen de container moet dan wel een keer de width duidelijk worden.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
#container{
    margin: 0;
    padding: 0;
/*    width: 965px;*/
/*    height: 638px;*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
 
Thomas van den Heuvel

Thomas van den Heuvel

11/04/2016 00:34:44
Quote Anchor link
@jopla, daarmee haal je je container uit de "flow", zou ik niet doen
@yoop, vaste hoogte snijd je je vaak mee in de vingers, met name bij dynamische websites/content, er zijn nettere/handigere oplossingen om dingen met hoogtes op te lossen, is wat meer moeite, maar dan heb je ook wat
 
J opla

j opla

11/04/2016 00:38:11
Quote Anchor link
@Thomas
In de hoogte centreren ... brand los, want ik heb nog niet veel werkends gevonden ... eigenlijk alleen deze methode werkt bij mij.
 
Thomas van den Heuvel

Thomas van den Heuvel

11/04/2016 13:51:58
Quote Anchor link
@jopla: mja, dat is hetzelfde als in de breedte centreren in zekere zin he, daarvoor heb je een vaste dimensie nodig voor zover ik weet (ben geen CSS expert). Het hangt er ook vanaf wat je probeert te centreren. In dit geval had ik het meer over de hoofdlayout/het contentgedeelte van een website. Het lijkt mij onverstandig om deze op voorhand vast te pinnen op een vaste hoogte, omdat simpelweg niet vaststaat hoeveel ruimte je (dynamische) content gaat innemen. Tenzij je misschien alles vastschroeft in voorgedefinieerde dimensies...

Op het moment dat je allerlei kunstgrepen moet gaan uithalen om een bepaald effect te bereiken is voor mij in ieder geval het moment om ofwel:
- te kijken of er nog een simpelere (semi-alternatieve) aanpak is, of gewoon
- het ontwerp te heroverwegen

Houd dingen gewoon simpel.
 
Ward van der Put
Moderator

Ward van der Put

11/04/2016 14:01:07
Quote Anchor link
J opla op 11/04/2016 00:38:11:
@Thomas
In de hoogte centreren ... brand los, want ik heb nog niet veel werkends gevonden ...

https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
 
J opla

j opla

11/04/2016 15:13:31
Quote Anchor link
@Thomas
Voor de hoogte is dit volgens mij de enige methode die werkt als je een vlak in het midden van het scherm terecht wilt laten komen. Ja, voor een mobieltje zal je het niet gebruiken, maar om iets mooi weer te geven op een ouderwets 1280x1024 scherm best mooi en handig.
Maar als je een betere methode hebt voor vertikaal centreren op de schermhoogte dan hoor ik het graag.

En ja, als het niet kan zoals het moet, dan moet het maar zoals het kan ...
 
Thomas van den Heuvel

Thomas van den Heuvel

11/04/2016 15:40:41
Quote Anchor link
Het lijkt mij nogal lastig om hier een universeel recept voor te geven, dit hangt van je content af. Op het moment dat je werkt met vaste afmetingen plaats je ook restricties op de content zelf, deze kan niet langer elk willekeurig uiterlijk hebben maar moet dan gaan voldoen aan zekere kenmerken. Je zult ergens een keuze moeten maken.

Kijk of de methode die @Ward voorstelt voor jou werkt, verzin een oplossing per specifiek geval, maak er een afbeelding van desnoods, of herzie je benadering en aanpak.

Of reken alles dynamisch uit met JavaScript lol.

Back on topic: @Louis als je afbeeldingen een probleem vormen overweeg dan het weergeven van thumbnails en als je hier op klikt krijg je een afbeelding op de oorspronkelijke grootte te zien. Via lightbox, popup of wat dan ook. Zoek in ieder geval een alternatieve oplossing voor dit specifieke probleem.

Wat je ook kunt doen is de afbeeldingen enkel een breedte geven die past, de verhouding van de afbeelding blijft dan behouden. Weet alleen niet of dat een nette oplossing is. Daarnaast lijkt het mij een verspilling van bandbreedte. Je laadt een fullblown afbeelding in en je geeft een postzegel weer :/.
 
Mary Grooteman

Mary Grooteman

30/05/2016 11:18:58
Quote Anchor link
Verticaal centeren doe ik meestal met
position: absolute;
width: 100%;
top: 50%;
left: 0;
width: 100%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);

of als je het helemaal in het midden wilt hebben geef je de breedte een percentage van bv 60% en transform: translate(-50%, -50%)

Of..flexbox, dat is helemaal superhandig en dat wordt steeds beter ondersteund!

.fleks{
-ms-box-orient: horizontal;
-ms-display: flex;
-webkit-display: flex;
display: -webkit-flex;
display: -ms-flexbox;/*IE10!*/
display: flex;
display: flexbox;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
margin: 0;
/*dit hieronder centreert verticaal*/
-webkit-align-items: center;
align-items: center;
}
 



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.