Css Snippets » centreren

Navigatie centreren door display:inline

Mark — Mon, 10 Aug 2009 08:25:20 +0000

Een navigatie centreren als je float gebruikt heeft het nadeel dat je een container element moet hebben en de exacte afmetingen moet weten om het te centreren, door display:inline te gebruiken vereenvoudig je dit door geen specifieke afmetingen nodig te hebben en text-align:center doet het werk voor jouw, om het even hoeveel navigatie-items je hebt.

HTML


    home
    about us
    products
    services
    contact

CSS

body{
padding-top: 60px;
background: #FFF;
font: 76% Arial,sans-serif;
}
ul#minitabs{
list-style: none;
margin: 0;
padding: 7px 0;
border-bottom: 1px solid #CCC;
font-weight: bold;
text-align: center;
white-space: nowrap;
}
ul#minitabs li{
display: inline;
margin: 0 2px;
}
ul#minitabs a{
text-decoration: none;
padding: 0 0 3px;
border-bottom: 4px solid #FFF;
color: #999;
}
ul#minitabs a#current{
border-color: #F60;
color: #06F;
}
ul#minitabs a:hover{
border-color: #F60;
color: #666;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Afbeeldingen horizontaal centreren

Mark — Sun, 24 May 2009 08:39:35 +0000

Als je een afbeeldingen hebt waarvan de afmetingen altijd vooraf gekend zijn is het relatief eenvoudig om deze te centreren te opzichte van het parent element. Maar wat als je de afmetingen niet vanop voorhand weet, of dat de afmetingen niet altijd hetzelfde zijn??
Met volgende CSS Snippet kan je dit probleem oplossen.

Met gekende afmetingen

HTML

CSS

div img {
margin: 0 auto;
width: 100px;
}

Ongekende/afwijkende afmetingen

HTML

CSS

div#wrapper {
  width: 350px;
  text-align: center;
  border: 1px solid; /* ter illustratie */
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Centreren van pagina

Mark — Sat, 16 May 2009 20:19:28 +0000

Om uw website in het midden te krijgen (centreren), is deze volgende CSS Snippet voldoende. Belangrijk is wel dat het element waarop je volgende code toepast daadwerkelijk dimensie heeft (zeker breedte).

HTML


tekst komt hier

CSS

#foo {
margin: 0 auto;
width: 800px;
border: 1px solid; /* ter illustratie */
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Vertikaal centreren met line-height

Mark — Sun, 05 Apr 2009 16:06:56 +0000

Je kan bijvoorbeeld tekst (links, tekst, quotes) vertikaal centreren ten opzichte van zijn parent element door geschikt line-height te gebruiken.

HTML


inhoud komt hier

CSS

div.liner {
height:100px;
border: 1px solid #888;
}
div.liner *{
margin: 0;
}
div.liner p {
line-height:100px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Vertikaal centreren

Mark — Sun, 28 Dec 2008 10:31:47 +0000

Er zullen zich waarschijnlijk al reeds veel webmasters en stylers afgevraagd hebben, hoe je nu juist (en op de correcte manier) een ontwerp met achtergrond gecentreerd krijgt op de pagina zonder dat de tekst ook zelf gecentreerd zich gaat verhouden.



Wij maken een blog



...uw volledige website staat hier...

#container {
margin: 0 auto;
width: 720px;
border: 1px solid #000;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon

Vertikaal en horizontaal centreren

Mark — Wed, 19 Nov 2008 13:26:56 +0000

Om een element vertikaal te centreren kan je volgende handige code gebruiken, let wel op dat het element een hoogte en een breedte moet hebben.
Er wordt vanuit gegaan dat dit is ten opzichte van ofwel de body (die zich relative bevind), ofwel een parent element die dan de CSS eigenschap position: relative heeft:

HTML

lorem ipsum enzo

CSS

#center{
   width:100px;
   height:100px;
   position:absolute;
   top:50%;
   left:50%;
   margin-top:-50px;
   margin-left:-50px;
}

Google Bookmarks Digg BlinkList Technorati Twitter del.icio.us Facebook StumbleUpon