Div's verticaal of bottom centreren ?

Status
Niet open voor verdere reacties.
yammaski

yammaski

Gebruiker
Lid geworden
9 mrt 2005
Berichten
284
Ik ben een bepaald gedeelte van een pagina van html tables en cellen naar css aan het converteren.
Het lukt me tot hier toe vrij goed, maar toch enkele vragen/probleempjes :
* hoe centreer je verticaal of bottom in een div ? (via Google vind je allerlei trukjes, maar tevergeefs)
* in een div (#Detail_Options) zitten enkele andere div's (#Detail_Options_lijn), mogen deze dezelfde id hebben ?

In het voorbeeld zie je misschien beter wat ik bedoel ...
 
yammaski zei:
* hoe centreer je verticaal of bottom in een div ? (via Google vind je allerlei trukjes, maar tevergeefs)
Klik om te vergroten...
Verticaal centreren blijft vaak een issue wanneer de hoogte van het te centreren object variabel is.
yammaski zei:
* in een div (#Detail_Options) zitten enkele andere div's (#Detail_Options_lijn), mogen deze dezelfde id hebben ?
Klik om te vergroten...
CSS ID's zijn uniek op een pagina, als je meerdere elementen hebt die dezelfde stijl moeten hebben dan dienen die een CSS class te hebben.
 
Dan zul je via javascript moeten berekenen wat de hoogte is zodat je dat kunt gebruiken.

Het truukje dat ik weet is een top van 50% en een negatieve margin-top de helft van de hoogte
Code: 
.vertical-center
{
    position: absolute;
    top: 50%;
    height: 1000px;
    margin-top: -500px;
}

HTML: 
<div class="vertical-center">
    Deze zal verticaal gecentreerd staan
</div>
 
Laatst bewerkt:
Hoi Yammaski,
Hoi, weg met de tabellen! ;)

vertical-align-0.png

uitgangs-situatie​

Ja, verticaal alignen is altijd wat lastig:
  • De vertical-align eigenschap geldt alleen voor images en tabel-cellen. (dus met de div #Detail_Options_lijn van je voorbeeld gaat het niet lukken)
  • Soms kan je een element een {display: table-cell} geven, dan geldt het ook. Maar dat is vaak water naar de zee dragen, want dan heb je grote kans de je omvattende div's van een {display: table} moet gaan voorzien, of er nieuwe div's bij moet maken (= met css de tabel compleet nabouwen).
  • Een on-the-fly javascript-berekening kan soms ook (de truc van ThaDevil), maar is niet altijd ideaal.
  • Soms kan met promoveren van voorgrond-images tot background-images iets uitgericht worden (die zijn makkelijk verticaal te positioneren).
  • Soms kan een img wat padding krijgen, of zelf wat loze hoogte eronder of erboven krijgen (inwendige padding als het ware).
  • Soms kan er wat met de line-height gespeeld worden.
  • En in een aantal gevallen kan de zaak gered worden met absolute posities.
Maar ... in het concrete voorbeeld gaat het om twee images :) en een <select> uitrolvakje. De twee images kunnen een {vertical-align: top} krijgen, en dan komt er dit uit:

vertical-align.png

Vervolgens kan er wat padding-top bij komen (gecompenseerd door even grote afname van de hoogte) om de drie-eenheid mooi in het vakje te zetten.
  • De <div> van deze optielijn hoeft dus gelukkig niet in 3en gedeeld te worden.
Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Vervolg voor vermoedelijk volgende vraag. :cool:

Om de sticker in het midden van z'n blokje te krijgen ...
vertical-align-2.png
... kan je het hier makkelijk met een {display: table-cell} doen:
  1. In de html de volgorde van de <div id="Detail_Image"> en de <div id="Detail_Options"> omdraaien.
  2. De naar rechts gefloate <div id="Detail_Options"> staat nu het eerst in de html, en dan komt de <div id="Detail_Image"> er vanzelf aan de linkerkant naast, ook zonder een {float: left} van de <div id="Detail_Image">.
  3. Die moeten we ook kwijt raken, want anders kan er geen table-cell van gemaakt worden!
  4. Het kan dan worden:
Code: 
#Detail_Image {
    width: 440px;
    height: 338px;
    border: 1px solid #666666;
    background-color: #E6E6E6;
/* float: left; geschrapt! */
    display: table-cell;
    vertical-align: middle;
}
Met vrolijke groet,
CSShunter
__________
PS: Als ik Firebug toch niet had ... ;)
 
Hallo csshunter ... weer even geleden.
Zoals je in eerder bericht zei wat me nog te doen stond ... ben ik dan maar begonnen om het "dansende effect" weg te werken met html-tables te converteren naar css. Had geen of weinig tijd.

Ik heb met "display en vertical-align" gespeeld, maar tevergeefs.
Met jouw inbreng is het me weeral gelukt. :)
Het werkt met alle browsers ('browsershorts.org), maar natuurlijk weer niet met MSIE 6-7 en 8.Deze plaatsen de image bovenaan. :evil:

Tha Devil zei:
CSS ID's zijn uniek op een pagina, als je meerdere elementen hebt die dezelfde stijl moeten hebben dan dienen die een CSS class te hebben.
Klik om te vergroten...
De "optielijnen pas ik dan ook aan naar verschillende div id's of 1 div meermaals gebruikt met dezelfde class ?

Aangepast voorbeeld.


Yam.
 
Laatst bewerkt:
Hoi Yam,
Prachtig dat m'n ;) van indertijd over tabellen-->css na wat incubatietijd toch een gaatje hebben gevonden om door te breken. :)

... maar natuurlijk weer niet met MSIE 6-7 en 8. Deze plaatsen de image bovenaan. :evil:
Klik om te vergroten...
Blijft over: IE8.
Heel merkwaardig dat die bij Browsershots de mist in gaat, want Netrenderer geeft IE8 dit keer een pluim:

racing-ie8.png

Zou de browsershots-machine soms een of andere compatibility-mode aan hebben staan en terugschakelen naar IE7? :rolleyes:

In elk geval: volgens de compatibility-tabel van quirksmode.org zou IE8 het gewoon moeten doen.

  • Nu heb ik momenteel geen IE8 onder handbereik, maar misschien kan iemand met een live IE8 bevestigen/ontkennen dat het goed gaat?
- Als er geen verschillende dingen in de optielijnen-vakjes komen, is een class wel zo handig: die hoef je maar 1 keer op te geven, anders moet je voor elke id hetzelfde gaan declareren.

Met vriendelijke groet,
CSShunter
 
IE 8 : bij deze staat de afbeelding toch bovenaan en niet vertikaal gecentreerd. Live test bij iemand gedaan en als je de compatibiliteitsmodus inschakelt in IE9 is het ook zo. Er zal dan weinig aan te doen zijn waarschijnlijk !?

Bedankt nogmaals,
Yam.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan