CODEWITHSUNDEEP
htmlcssbutton
Isabella.
Isabella.

Reputation: 43

How to center my buttons vertically?

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:

enter image description here

Upvotes: 3

Views: 153

Answers (5)

DanielaB67
DanielaB67

Reputation: 442

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>

Upvotes: 0

Amaan Iqbal
Amaan Iqbal

Reputation: 761

You can try two things

  1. Use following styling and remove unnecessary margin-right

    button {     
   margin-top : __px;
}

    1. 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

Upvotes: 0

skm
skm

Reputation: 1212

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>

Upvotes: 0

Steve K
Steve K

Reputation: 9045

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>

Upvotes: 1

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

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...

Upvotes: 0

Related Questions