[CSS] linktekst verticaal centreren binnen hover-area - Softwareontwikkeling

maandag 28 november 2005 15:20

Acties:

Verwijderd

Topicstarter

Probleem: link centreert niet verticaal binnen cel.
Ik heb een tabelstructuur van 3 kolommen in html, waarbij iedere cel een link bevat. Soms beslaat die linktekst 1 regel, maar soms ook 2 (het schaalt mee). De linktekst moet vertikaal blijven centreren, onafhankelijk van over hoeveel regels de linktekst wordt omgeslagen, met een vaste padding (bv. 2px).
Nou is het wel gelukt om mbv. "height:100%" ervoor te zorgen dat de hover-area (die zichtbaar wordt doordat de hover-status een andere achtergrondkleur heeft) altijd gelijk is aan de hoogte van de cel waar de link in zit, ook als in de ene kolom een link staat van 1 regel hoog en in de andere kolom ernaast een link over 2 regels. Maar probleem is wel dat de link dan vertikaal niet meer centreert, maar bovenin uitlijnt.

Cascading Stylesheet:

td.projecttitel {  
    vertical-align: middle;
    height:100%;    
}
a {
    width:100%;
    display:block;
    padding:2px 0;
    height: 100%;   
}

Dank alvast!

maandag 28 november 2005 15:25

Acties:

disjfa

be

Je maakt je link 100% hoog. Dat betekend dus dat je link perfect in het midden van de table cell staat aangezien hij even hoog is als je table cell.

Binnen de link staat de text alleen dan weer bovenaan. En aan een link kan je geen vertical align meegeven.

disjfa - disj·fa (meneer)
disjfa.nl

maandag 28 november 2005 15:52

Acties:

OkkE

CSS influencer :+

als de cell een vaste hoogte heeft kun je het zo doen:
[code]td { height: 100px; }
a { height: 100px; line-height:100px; }[/code]
Zo komt de tekst binnen de <a> in het midden te staan. maar je zit op dit moment indd met het probleem dat disjfa zegt.

-- edit --

laat maar, probleem niet goed gelezen, dit werkt bijv. al weer niet met 2 regels tekst.
_{ja ik las het later ook disjfa..}

[ Voor 32% gewijzigd door OkkE op 28-11-2005 15:54 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 28 november 2005 15:53

Acties:

disjfa

be

OkkE schreef op maandag 28 november 2005 @ 15:52:
als de cell een vaste hoogte heeft kun je het zo doen:
code:
1
2
td { height: 100px; }
a { height: 100px; line-height:100px; }

Maar wat als er 2 regels komen

[ Voor 34% gewijzigd door disjfa op 28-11-2005 15:54 ]

disjfa - disj·fa (meneer)
disjfa.nl

maandag 28 november 2005 16:18

Acties:

OkkE

CSS influencer :+

Zoeken bij Google op "css vertical-align text" leverde mij als #5 hit volgens mij de oplossing voor het probleem.

-- edit --

Oh, en hier nog even een linkje naar het gehele artikel: http://www.jakpsatweb.cz/...ical-center-solution.html

[ Voor 55% gewijzigd door OkkE op 28-11-2005 16:22 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

maandag 28 november 2005 16:21

Acties:

disjfa

be

OkkE schreef op maandag 28 november 2005 @ 16:18:
Zoeken bij Google op "css vertical-align text" leverde mij als #5 hit volgens mij de oplossing voor het probleem.

Maar als hij dan een :hover wilt hebben met 100% hoogte van de parent

disjfa - disj·fa (meneer)
disjfa.nl

maandag 28 november 2005 16:31

Acties:

OkkE

CSS influencer :+

disjfa schreef op maandag 28 november 2005 @ 16:21:
[...]

Maar als hij dan een :hover wilt hebben met 100% hoogte van de parent

Helaas gaat het in Internet Explorer niet helemaal goed, de link verdwijnt onder de tekst, waardoor je geen handje ziet. Maar als je op je #inner een cursor:pointer; neer zet is ook dat opgelost.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
    <title>Vertical centering in valid CSS</title>
    
    <style type="text/css">
        html, body { height: 100%; }
        table { height: 90%; }
        td { height: 100%; width: 200px; }
        a:hover { background-color: pink; }
        
        #outer {height: 100%; display: block; overflow: hidden; position: relative;}
        #outer[id] {display: table; position: static;}
        
        #middle {position: absolute; top: 50%;} /* for explorer only*/
        #middle[id] {display: table-cell; vertical-align: middle; position: static;}
        
        #inner {position: relative; top: -50%; text-align: center; } /* for explorer only */
        /* optional: #inner[id] {position: static;} */
        
        /* just format */
        .greenBorder {border: 1px solid green; background-color: ivory;}
    </style>
</head>

<body>

<table>
<tr>
    <td>

<a href="#" id="outer" onclick="alert('ok');" class="greenBorder">
    <div id="middle">

        <div id="inner">
            any text<br>
            <b>any height</b><br>
            any content, for example generated from DB<br>
            everything is vertically centered<br>
        </div>
    </div>
</a>
    
    </td>
    <td>

[...]

    </td>
</tr>
</table>

</body>

</html>

[ Voor 13% gewijzigd door OkkE op 28-11-2005 16:32 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.