Clever Geek Handbook

How do I center my buttons vertically?

I put divs around each button and I set them both to a string. They just want to add up while I try to focus 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>
Run codeHide result


This is a screenshot of what this thing does:

enter image description here

+3


source to share


5 answers


You forgot to set the #light

div to inline-block

. But probably the best way to do it is to just surround both buttons in a div and give it css 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>
Run codeHide result


+1


source


try it

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 left and right margins

Hope it helps ...

0


source


Hope this helps:

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>
Run codeHide result


0


source


Place your buttons in a main container div, 100% width, and change the button edges to auto. The parent div should be 100% width, and the children should be centered 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>
0


source


You can try two things

  • Use the following style and remove the unnecessary margin-right

    button {     
   margin-top : __px;
}

    1. Use relative position

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

This will solve your problem.

OR you can also try first answer for vertically centering button using css

Let me know if you need more help

0


source






More articles:


All Articles