Center Div and Content Vertically

Posted In HTML & CSS
  • taziamoma-abraham 11 months ago
    So I’m posting this in CSS because I think I’m having a CSS issue. Basically, I have this right now: https://taziamoma.com/Forum/
    
    I’m trying to vertically center the blue box and everything inside it. I’ve tried line-height, vertical-align, display: inline-block, position relative and absolute. The only way that works is if I do it manually with absolute or margin. But absolute isn’t responsive so that’s a problem. I’m using Bootstrap from the CDN if that matters. I’m only going to include code for the first box so that it doesn’t get messy. 
    
    I’m having a tough time even centering the text vertically.
    The code is here.

    So I’m posting this in CSS because I think I’m having a CSS issue. Basically, I have this right now: https://taziamoma.com/Forum/

    I’m trying to vertically center the blue box and everything inside it. I’ve tried line-height, vertical-align, display: inline-block, position relative and absolute. The only way that works is if I do it manually with absolute or margin. But absolute isn’t responsive so that’s a problem. I’m using Bootstrap from the CDN if that matters. I’m only going to include code for the first box so that it doesn’t get messy. 

    I’m having a tough time even centering the text vertically. The code is here.

  • andrewo0 11 months ago
    Hi taziamoma-abraham
    
    position absolute can be responsive but you will need to wrap it in a position relative and you could just use margin-top and margin-bottom with out giving it a fixed height
    
    also your using bootstrap for a responsive website so why do you use fixed width of 1175px for your .wrapper?

    Hi taziamoma-abraham

    position absolute can be responsive but you will need to wrap it in a position relative and you could just use margin-top and margin-bottom with out giving it a fixed height

    also your using bootstrap for a responsive website so why do you use fixed width of 1175px for your .wrapper?

  • yoan-jericko 8 months ago
    you will need to wrap it in a position relative and you could just use margin-top and margin-bottom with out giving it a fixed height
    [my ip](https://myip.kim/) [birthday wishes](https://birthdaywishes.onl/) [tneb](https://elecpay.in/tneb/)

    you will need to wrap it in a position relative and you could just use margin-top and margin-bottom with out giving it a fixed height my ip birthday wishes tneb

Please login or signup to leave a response.

Login

or Sign Up

Sign Up

or Login
×
Want to create your own SAAS?

I can teach you to create your own Software as a Service. Click here to learn more!

Visit SAAS Adventure!