Looking for some help with CSS

Comments

• PrincessOfCats Member

  January 2016

  @Jonchun said:
  I'm working on a private project (mobile app) and want to achieve what should be simple, but isn't working right...

  It has to do with vertical aligning text in the middle of a div while making the entire div clickable. I can use display: block to make the div clickable but that screws up vertical align. I can use display: flex to get vertical align working perfectly but then the div is no longer clickable. Is there a way to combine the two? If anyone wants to make a js fiddle, here's a text diagram of the layout i'm trying to achieve

  -----------
             !
     50%     !
  -----------
     25%     !
  -----------
       !     !  <- 25%
  -----------
  

  I want each section to be a separate div that's clickable and have text that is centered horizontally and vertically. (The numbers listed are the heights of the divs in percentages)

  In case you haven't noticed... yes I hate css... Thanks!

  I have found http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ quite useful.

  Thanked by 2Jonchun raindog308
• Jonchun Member

  January 2016

  Will give that a shot tonight.
• noaman Member

  January 2016

  Use bootstrap or some CSS framework....its lot easy to work with.....
• Jonchun Member

  January 2016

  @noaman said:
  Use bootstrap or some CSS framework....its lot easy to work with.....

  That's not an option in this scenario. However, I did figure it out so yay!
  Did something similar but hackish to what @ALinuxNinja suggested.