Avatar billede dj.iceman Nybegynder
11. december 2011 - 12:41 Der er 3 kommentarer og
1 løsning

Vertical alignment på blockquote

Hej,

Nu har jeg siddet hele formiddagen og forsøgt at få mine blockquotes til at vise teksen i midten af boksen - både vertical og horisontalt. Hvordan skal det laves?

blockquote{margin:1em 1em 1em 0;min-height:40px;padding:.6em 1em .6em 2.4em;border:1px dotted #ddd;font-style:italic;color:#474747;background:#fff url(images/blockquote.png) no-repeat 4px top;}
blockquote p{padding:8px;margin:2px}
blockquote blockquote{margin:1em 0 1em;}
Avatar billede olebole Juniormester
11. december 2011 - 19:35 #1
<ole>

Det skyldes, at du har misforstået meningen med vertical-align. Den er ikke beregnet til at lodret centrere indholdet i et element, men til at lodret centrere et element i forhold til dets omgivelser.

Man støder af og til ind i denne misforståelse, og det skyldes nok, at property'en faktisk centrerer vertikalt i én slags elementer: Tabelceller. Da tabeller var vældig udbredt som layoutværktøj for en halv snes år siden, hænger denne opfattelse af vertical-align åbenbart ved hos nogle.

HTML er ikke beregnet til at centrere indhold vertikalt i elementer, men der findes dog en metode - omend det er et uskønt 'hack':


display: table-cell;
vertical-align: center;


/mvh
</bole>
Avatar billede dj.iceman Nybegynder
12. december 2011 - 10:22 #2
Tak for det fyldestgørende svar!

Jeg hænger nok fast i det gamle, i det jeg ikke laver så forfærdelig meget kodning.

Smid et svar.
Avatar billede olebole Juniormester
12. december 2011 - 16:50 #3
Ellers tak, jeg samler ikke point. Læg selv et svar og accepter det, så tråden lukkes  =)

Prøv i øvrigt at lægge to span ved siden af hinanden og med et 'H' som indhold. Det ene med font-size på 150px og det andet på 12px - al anden CSS ens. Se, hvordan de placeres i en browser - og prøv så at give dem begge vertical-align:middle. Så vil virkningen være meget tydelig, og du glemmer det aldrig  *o)
Avatar billede dj.iceman Nybegynder
10. januar 2012 - 11:08 #4
Svar
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester