Webwinkel Forum

Het lukt me niet om met vertical-align: middle in CSS tekst verticaal te centreren op een achtergrondafbeelding. Het gaat om de prijsinformatie op het zonnetje:

CSS-code tot nu toe:

Code: Selecteer alles

div.wrapper{
  clear:both;
  height:160px;
  position:relative;
  text-align:center;
  width:100%
}
div.wrapper img{
  clear:none
}
div.actie{
  background-image:url('/m/gfx/actie.png');
  background-repeat:no-repeat;
  font-size:20px;
  font-weight:bold;
  height:122px;
  left:52%;
  line-height:1.15em;
  position:absolute;
  top:1em;
  width:121px;
  vertical-align:middle
}
div.actie a{
  display:block;
  height:100%;
  vertical-align:middle
}

Had met Zen Cart hetzelfde probleem... daar heb ik dan de tekst niet met vertical align maar het plaatje met vertical align gedaan... dat werkte wel...

eentje schreef:Had met Zen Cart hetzelfde probleem... daar heb ik dan de tekst niet met vertical align maar het plaatje met vertical align gedaan... dat werkte wel...

De inhoud is in twee opzichten variabel: variabele content (bijvoorbeeld andere prijzen) en een variabele regelhoogte (soms 2 regels, soms 3). Dat kan inderdaad met een plaatje via GD voor PHP, maar volgens mij heb ik nu een hack gevonden waarmee het ook kan met HTML5-tekst en CSS:

Code: Selecteer alles

div.actie a{
  background:transparent;
  display:block;
  height:100%;
  margin-top:-35px;
  position:absolute;
  top:50%;
  vertical-align:middle;
  width:121px
}

Werkt in drie stappen.

1. De combinatie display: block plus position: absolute geeft een absoluut gepositioneerde block-level link.

2. Daarna plaatst top: 50% de bovenkant daarvan op de helft van de parent.

3. Tot slot verschuift margin-top: -35px met een negatieve waarde de bovenzijde weer omhoog.

Dat blijkt goed te werken in alle gangbare browsers en sommige smartphones, maar de vraag is natuurlijk of zo'n CSS-hack altijd fraai oogt op een mobiel. Resultaat staat onder de linklijst op:

http://www.briksets.nl/m/

Webwinkel Forum

Tekst verticaal centreren

Tekst verticaal centreren

Re: Tekst verticaal centreren

Re: Tekst verticaal centreren