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)

[CSS] text in midden van een kader

Anne
14 antwoorden
  • Sorry, maar ik kom er echt niet uit. Ik heb in CSS een kader van 120px hoog gemaakt. Hierin staat wat text. Deze tekst is soms 1 en soms meerder regels lang. Hoe krijg ik het voor elkaar om deze in het vertikale midden van heet kader te plaatsen?

    Hie ronder de codes.

    Het kader
    [code:1:419ec78588]
    #header {
    height: 140px;
    padding-left: 60px;
    padding-right: 60px;
    margin-left: 40px;
    margin-right: 40px;
    background: #3366cc;
    border: 5px solid #ff9900;
    margin-top: 20px;
    }
    [/code:1:419ec78588]

    en de <h1> definitei di eik gebruik in het kader

    [code:1:419ec78588]
    h1 {
    text-align:center;
    font-family: syntax,arial;
    font-size: 24px;
    color: #ff9900;
    }
    [/code:1:419ec78588]
  • Zet binnen h1 is vertical-align:middle; nooit mee gewerkt dus het zou kunnen mislukken :roll:

    http://www.w3.org/TR/REC-CSS2/visudet.html#line-height

    -termin8or
  • Als je in #header dit zet:
    display:table-cell;
    vertical-align:middle;
    dan zou het moeten werken, echter alleen in Mozilla en Opera7.
    In IE werkt het niet, want die begrijpt display:table-cell niet.

    Als je het ook werkend in IE wil hebben dan zie ik geen andere oplossing dan een tabel te gebruiken.
    Dus ipv <div id="header"></div>
    <table><tr><td id="header"></td></tr></table>
    [size=9:c70f13bb35]Hmm, doet me ergens aan denken… :roll: [/size:c70f13bb35]

    Er is nog een andere manier, dmv het schuiven marges en/of paddings, maar dan moet je wel de preciese hoogte weten van h1 en als je zegt dat het 1 of meerdere regels kan beslaan, heb je daar niet veel aan.
  • [quote:0c148103a5="termin8or"]Zet binnen h1 is vertical-align:middle; nooit mee gewerkt dus het zou kunnen mislukken[/quote:0c148103a5]

    Inderdaad dit werkt niet. Dat had ik ook al bedacht.
  • [quote:ca1e29640c="hulpje"]
    In IE werkt het niet, want die begrijpt display:table-cell niet.
    [/quote:ca1e29640c]

    Stomme IE, maar ik ga het toch proberen.
  • kijk hier eens:

    http://www.wpdfd.com/editorial/wpd0103.htm#toptip

    het lijkt er wel op.

    wimb
  • Het lijker wel op, maar is het net niet helemaal. Dit gaat over het centeren van een box op het beeldscherm. Niet over het centreren van text in een box.
  • Maar je kan dan toch een box maken met transparante achtergrond en zonder border zodat je visueel exact hetzelfde effect krijgt?

    - Bas
  • Maar de tekst met een blijft dan wel in het midden, maar als de tekst twee regels is niet meer. Dan moet de hoogte van de box ook veranderen. En volgens mij doet ie dat niet automagisch.
  • [quote:8e7ae6ad4d="Demonaz"]Maar de tekst met een blijft dan wel in het midden, maar als de tekst twee regels is niet meer. Dan moet de hoogte van de box ook veranderen. En volgens mij doet ie dat niet automagisch.[/quote:8e7ae6ad4d]

    Als je geen height opgeeft zou het toch gewoon goed moeten gaan?
  • Nee het werkt niet binnen block level elements. Het enige wat ik me zou kunne voorstellen is dat je, je header gewoon niet vast maakt, maar meer flexibel.

    -termin8or
  • Het kwam daarnet weer boven, centeren hoort zo:[code:1:107aaac900]margin:auto;[/code:1:107aaac900]En we kunnen Bill natuurlijk bedanken voor het niet ondersteunen hiervan, hurray :)

    -termin8or
  • Alleen horizontaal centreren kun je daarmee bewerkstelligen.
    In IE werkt text-align:center ook voor block-elementen (wat niet zou moeten).
  • Mijn idee :D

    -termin8or

Beantwoord deze vraag

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