Centrando texto verticalmente

19/Mar/2008 337

Una vez más vengo con una técnica que de tan simple dan ganas de llorar por no habérsenos ocurrido antes. Lo que mostraré ahora, es cómo lograr centrar verticalmente un texto a través de su contenedor. Esta es la clave, ya que se suele pensar que el texto mismo es el que debe tener la propiedad de alineado vertical pero la idea, al igual que el artículo anterior de centrado horizontal, es que el contenedor permita hacerlo, así cualquier elemento que esté dentro pueda tener esta cualidad.

La clave: la propiedad line-height. Definiento un alto de línea fijo para el contenedor, podremos lograr que todos sus elementos queden centrados relativos a él, ya que al contrario de height, siempre sus elementos hijos quedarán centrados verticalmente. Esto funciona para cualquier etiqueta bloque: <td>, <p>, <li>, etc.

El CSS es el siguiente:

li, td, p {
   line-height: 100px;
}

O sea, si el contenedor es un <li>, un <td> o un <p> (pueden ser muchos otros), defino el alto de éste mediante line-height (en vez de hacerlo mediante height) y todos sus elementos de texto y botones quedarán automáticamente centrados verticalmente.

Ver ejemplo

El único problema… si… ese mismo… IE6 y las etiquetas de botones <button> e <input />. Como se darán cuenta, no lo hace del todo bien. Lo siguen IE7 y Opera. Pero hay una manera de solucionarlo mediante CSS pero sólo para IE7 y Opera: definir el alto fijo de los botones mediante height. Pero con IE6 no hay caso, no lo soluciona.. Otro detalle es que no funciona con imágenes <img />. Siento mucho si se decepcionaron leyendo estas últimas palabras… tiene sus limitaciones, pero puede salvar en algunas situaciones.

Comentarios

  1. app.gumroad.com [#]

    Greetings from Colorado! I’m bored to tears at work so I decided to browse your website on my iphone during lunch break.
    I love the info you present here and can’t wait to take a look when I get home.
    I’m surprised at how quick your blog loaded on my phone ..
    I’m not even using WIFI, just 3G .. Anyhow, superb blog!
    asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr

  2. tinyurl.com [#]

    Excellent weblog here! Additionally your web site quite a bit up very fast!
    What web host are you using? Can I am getting your
    affiliate hyperlink on your host? I desire my web site loaded
    up as quickly as yours lol scoliosis surgery
    https://0401mm.tumblr.com/ scoliosis surgery

  3. stromectol over the counter [#]

    ivermectin tablets order Centrando texto verticalmente | CSSLab | Laboratorio de ideas web https://ivermectin1.com/ ivermectin where to buy

  4. 100 free gay dating [#]

    gay speed dating denver https://datinggayservices.com/

  5. quest bars but [#]

    Pretty great post. I just stumbled upon your weblog and wanted
    to say that I have truly enjoyed browsing your blog posts.
    After all I will be subscribing on your feed and I am hoping you
    write again very soon! quest bars http://bitly.com/3jZgEA2 quest bars

  6. gay 22 dating 18 [#]

    gay cigarette dating https://gaydatingcanada.com/

  7. bitly.com [#]

    Pretty section of content. I simply stumbled upon your weblog
    and in accession capital to claim that I acquire in fact enjoyed account your blog posts.
    Anyway I’ll be subscribing to your feeds and even I fulfillment you get right
    of entry to persistently rapidly. cheap flights http://1704milesapart.tumblr.com/ cheap flights

  8. bit.ly [#]

    hello!,I really like your writing so a lot! share we keep up a correspondence extra about your article
    on AOL? I require a specialist in this area to resolve my problem.
    May be that’s you! Having a look ahead to peer you.

    cheap flights http://1704milesapart.tumblr.com/ cheap flights

  9. http://www.iherb.com/ [#]

    I like it when people come together and share thoughts.

    Great blog, keep it up! quest bars https://www.iherb.com/search?kw=quest%20bars quest
    bars

  10. coub.com [#]

    I was recommended this web site by means of my cousin. I’m not sure whether
    or not this submit is written through him as no one else realize such targeted approximately
    my trouble. You are amazing! Thanks! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

  11. hydroxychloroquineMt [#]

    buy chloroquine phosphate canada hydroxychloroquine price hydroxychloroquine uses

  12. http://bitly.com/ [#]

    I read this piece of writing fully concerning the comparison of latest and earlier technologies, it’s amazing article.
    ps4 games https://tinyurl.com/45xtc52b ps4

  13. zithromaxeska [#]

    zithromax oral z pack indications zithromax used for

  14. zithromaxeska [#]

    azithromycin oral tablet 250 mg zithromax indications zithromax generics

  15. Terry Yamanaka [#]

    calan xeloda dramamine

  16. does zyrtec raise blood pressure [#]

    zyrtec prescription – http://allergyd.com

  17. provigilforsale [#]

    modafinil prescription provigil for depression

  18. zyrtec 10 mg dosage [#]

    cetrine – https://allergyd.com

  19. ivermectin 3 mg [#]

    buy ivermectin https://stromectolforte.com/ buy stromectol pills ivermectin dosage by weight

  20. dr pierre kory ivermectin [#]

    ivermectin liб»Ѓu viГЄn 3 mg https://stromectolforte.com/# ivermectin ivermectin for humans over the counter

  21. samples for healthcare professionals [#]

    what is cetirizine hydrochloride – https://allergyd.com

  22. cialis pills [#]

    cialis tablets cialis 20 mg

  23. Anthonyliz [#]

    herbal viagra tadalafil generic alternative equivalent to viagra can you buy viagra without a prescription peak of action of medications viagra working

  24. pharmaceptica.com [#]

    what is in chloroquine https://www.pharmaceptica.com/

  25. stromectol otc [#]

    stromectol tablets buy online https://stromectolforte.com/ buy ivermectin online purchase stromectol online

  26. RodolfoSwece [#]

    how long does cialis last 100 milligram viagra how viagra affects the body lowest price viagra herb viagra green leaf pill viagra in action video gnc sexual supplements for men

  27. stromectolforte.com [#]

    ivermectin tablets for humans https://stromectolforte.com/# ivermectin over the counter ivermectin side effects

  28. provigilprice [#]

    modafinil prescription online how long does modafinil last

  29. provigilmedication [#]

    modafinil otc https://getmodafinilnow.com/

  30. bactrim antibiotic [#]

    sulfamethoxazole tmp ds tablet sulfamethoxazole uses

  31. ivermectin tablets for sale walmart [#]

    stromectol dosage chart http://stromectolforte.com/ ivermectin for humans for sale ivermectin for sale

  32. modafinilmoa [#]

    buy provigil online buy modafinil reddit

  33. comprimidos de estromectol [#]

    ivermectin https://stromectolforte.com/# ivermectin otc stromectol for sale

  34. ivermectin tablets [#]

    stromectol usa http://stromectolforte.com/# ivermectina per l’uomo do i need a prescription for ivermectin

  35. FritzPeerb [#]

    aspirin and grapefruit juice interaction chinese viagra alternative black pills male enhancement cialis samples viagra coupons for cvs 24 hour prescriptions foods that increase libido in women

  36. modafinil [#]

    buy modalert reddit buy provigil online

CSSLab