Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[HTML / CSS] - Style="vertical-align: middle" werk

None
10 antwoorden
  • Ik ben een website aan het maken [b:79444ffd6e]zonder tabellen[/b:79444ffd6e].

    Op het einde heb ik de code:[code:1:79444ffd6e]<div style="vertical-align: middle; background-color: #104b85; height: 20px; text-align: right; color: #ffffff">Powered by <a href="http://www.bartnet-designs.tk" onclick="window.open(this.href); return false;" class="copyright">BartNet Designs</a>.&nbsp;</div>[/code:1:79444ffd6e]Het is dus de bedoeling dat de tekst mooi in het midden aan de rechterkant van het divje zit. Dit lukt niet.

    Ziet iemand een fout?

    Ter info:
    http://www.bartnet.be/Other_Sites/Familie%20De%20Moitie/index.html
    http://www.bartnet.be/Other_Sites/Familie%20De%20Moitie/Other%20Files/Style.css
  • [code:1:5365d00d8f]vertical-align: middle;[/code:1:5365d00d8f]
    vervangen door
    [code:1:5365d00d8f]margin: 3px;[/code:1:5365d00d8f]
    of een andere waarde.
  • Het werkt niet echt. Al wat het doet is de afstand tussen de text buiten de kader en de kader groter maken …
  • Zoiets?
    [code:1:024577d3c0]
    <div style="display:table;width:100%;">
    <div style="display:table-cell;vertical-align: middle; background-color: rgb(16, 75, 133); height: 20px; text-align: right; color: rgb(255, 255, 255);">Powered by <a href="http://www.bartnet-designs.tk/" onclick="window.open(this.href); return false;" class="copyright">BartNet Designs</a>. </div>
    </div>
    [/code:1:024577d3c0]
    Werkt in Opera en Mozilla.
  • Helaas, het werkt niet in Internet Explorer dus het moet daar ook in werken.

    Ik heb het dan maar zo gedaan:[code:1:d937f7ff13]<div style="margin-top: 3px; background-color: #104b85; height: 20px; text-align: right; color: #ffffff; width: 750px"><img src="Images/spacer.gif" alt="" title="" style="width: 1px; height: 4px" /><br />Powered by <a href="http://www.bartnet-designs.tk" onclick="window.open(this.href); return false;" class="copyright">BartNet Designs</a>.&nbsp;</div>[/code:1:d937f7ff13]Ik heb geen andere mogelijkheid gevonden.
  • http://www.wpdfd.com/editorial/wpd0103.htm#toptip
    Voor jouw geval:
    [code:1:8f6faf5cf4]<style type="text/css">
    <!–
    #een {
    background: #104b85;
    color: #000000;
    height: 40px;
    color: #ffffff;
    text-align: right;
    }
    #twee {
    margin-top: -10px;
    position: relative;
    top: 50%;
    color: white;
    }
    //–>
    </style>
    </head>
    <body>
    <div id="een">
    <div id="twee">
    Powered by <a href="http://www.bartnet-designs.tk" onclick="window.open(this.href); return false;" class="copyright">BartNet Designs</a>
    </div>
    </div>[/code:1:8f6faf5cf4]
  • Voor een <div> met een hoogte van 20px werkt het niet…
  • Dan moet je een beetje spelen met de -10px.
    Heb je een klein lettertype en een grote div-hoogte.
    A = div-hoogte in pixels
    B = lettergrootte in pixels
    C = margin-top in pixels
    C = (A - B)/2

    Zou zomaar kunnen kloppen ;)
    [code:1:222c1301b9]#twee {
    margin-top: -10px; [/code:1:222c1301b9]
  • [quote:f28166986c]top: 50%;[/quote:f28166986c]

    das net iets teveel denk ik, aangezien de BOVENKANT van de 2e div dan in het midden staat.
    als je "de tekst" in het midden wilt hebben het een paar pixels minder moet zijn.
    dit maakt nog best wel wat uit in divs die maar een paar pixels hoog zijn…
  • Ik heb ervan gemaakt:[code:1:329398ef68].footerout
    {
    background: #104b85;
    color: #000000;
    height: 20px;
    color: #ffffff;
    text-align: right;
    width: 750px
    }
    .footerin
    {
    margin-top: 0px;
    position: relative;
    top: 15%;
    color: white
    }[/code:1:329398ef68]En in het pagina:[code:1:329398ef68]<div class="footerout"><div class="footerin">Powered by <a href="http://www.bartnet-designs.tk" onclick="window.open(this.href); return false;" class="copyright">BartNet Designs</a>.&nbsp;</div></div>[/code:1:329398ef68]Ik heb het getest op Internet Explorer, Opera, Mozilla, Mozilla Firefox en Netscape maar [b:329398ef68]het werkt enkel op Internet Explorer en Opera[/b:329398ef68].

    Ik heb het opgelost door eerst te kijken welke browser er is en dan een andere footer te geven.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.