How to center my buttons vertically?

Question

I put a div around each button and I set them both to inline. They just want to stack as I keep trying to center them.

This is my HTML:

     body{
  background-color:black;
     }


    #light{
 margin-left:50%;
 margin-right:70%;
    }

    #dark{
 margin-left:50%;
 margin-right:50%;
 display:inline-block;
    }
 

    h3{
 color:white;
 font-family:Courier New;
 font-size:24px;
 margin-left:500px;
    }

    <!DOCTYPE html>
    <html>
    <head>
    <title>question reality.</title>
    <link rel="stylesheet" type="text/css" href="intro page.css">
    </head>

    <body>

    <h3>make your choice.</h3>

    <div id="light"><button>Light</button></div>
    <div id="dark"><button>Dark</button></div>


    </body>
    </html>

This is a screencap of what this thing is doing:

use text-align:center property instead of margin left and right and give a try — Chandra Shekhar, Jul 04 '17 at 03:17
Pls refer to this link: https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers . It has a better way of dealing with this. — Sujith, Jul 04 '17 at 03:19
Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — NewUser, Jul 04 '17 at 03:22
I don't think it is a good practice to have space in file names as you did for your css file: `href="intro page.css"` — skm, Jul 04 '17 at 03:39

Steve K · Answer 1 · 2017-07-04T03:26:53.513

You forgot to set the #light div to inline-block. But probably a better way to do it is just to surround both buttons in a div and give that some css of text-align:center like so:

body{
  background:black;
}
h3{
  text-align:center;
  color:white;
  font-family:Courier New;
  font-size:24px;
}
.text-center{
    text-align:center;
}

<h3>Make Your Choice</h3>
<div class="text-center">
    <button>Light</button>
    <button>Dark</button>
</div>

score 0 · Answer 2 · answered Jul 04 '17 at 03:19

0

Try this

CSS

 body{
 background-color:black;
 }


#light,#dark,h3{
  text-align:center;
}


h3{
color:white;
font-family:Courier New;
font-size:24px;
}

use text-align:center property instead of margins on left and right

Hope this helps...

answered Jul 04 '17 at 03:19

Chandra Shekhar

3,550
2
14
22

score 0 · Answer 3 · answered Jul 04 '17 at 04:01

Hope this would help:

body{
    background-color:black;
}
#light{
    position: absolute;
    top: 45%;
    left: 50%;
}
#dark{
    position: absolute;
    top: 55%;
    left: 50%;
}
h3{
    color:white;
    font-family:Courier New;
    font-size:24px;
    text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <title>question reality.</title>
    <link rel="stylesheet" type="text/css" href="intro page.css">
  </head>

  <body>

    <h3>make your choice.</h3>

    <div id="light"><button>Light</button></div>
    <div id="dark"><button>Dark</button></div>


  </body>
</html>

DanielaB67 · Answer 4 · 2017-07-04T04:23:23.943

Place your buttons in a main container div, 100% width, and change the margins of the buttons to auto. The parent div must be 100% width and the children, will center align if their margin is set to auto. https://codepen.io/DannaB67/pen/KqRoJK

   body{
     background-color:black;
     }
  .main{
    width:100%;}

  #light{
    margin:auto;
    display:inline-block;
    }

  #dark{
    margin:auto;
    display:inline-block;
    }

  h3{
    color:white;
    font-family:Courier New;
    font-size:24px;
    text-align: center;
    }

<body>

    <div align="center" class="main">

      <h3>make your choice.</h3>
      <div id="light"><button>Light</button></div>
      <div id="dark"><button>Dark</button></div>

   </div>

</body>

score 0 · Answer 5 · answered Jul 04 '17 at 04:10

You can try two things

Use following styling and remove unnecessary margin-right

button {     
   margin-top : __px;
}

Use position relative

button {
   position: relative;
   top:20%;
}

This will solve your problem

OR you can also try first answer at Vertically centering button using css

Let me know if you require any further help

How to center my buttons vertically?

5 Answers5