stackoom
  简体   繁体   中英

Buttons are horizontally aligned

 原文  2018-08-14 16:21:29  1   7    html/ css

Question

Check out the code 

 body, html { margin: 0; height: 100%; } .background { height: 100%; background-image: url(../images/home-background.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .button { border: none; padding: 15px 25px; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; float: right; width: 28vw; border-radius: 50px; position: relative; margin-right: 7vw; } .button:hover { background-color: green; } .login { background-color: #DF6248; color: white; margin-top: 12vw; } .register { background-color: #DF6248; color: white; margin-top: 12vw; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/home.css"> </head> <body class=background> <button class="button login">LOGIN</button> <button class="button register">REGISTER</button> </body> </html>

What this is doing is horizontally aligning the buttons. But I want the Register button to be below the Login button. Is there anything that I'm missing.?

I tried br as well, but it's not working as well. How can I make it work?

7 answers

solution1
 0  

 .layer { margin: 10px 0 0 10px; width:100%; float: left; } .child { float: both; margin-left: 0px; margin-top: 0px; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="layer"> <div class="child">1</div> <div class="child">2</div> </div> </body> </html>

solution2
 0  2018-08-14 16:36:41

You have float:right in you .button class. I removed it and added display:block . Study the behavior of float here 

 body, html { margin: 0; height: 100%; } .background { height: 100%; background-image: url(../images/home-background.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; position:relative; } .button { border: none; padding: 15px 25px; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; display: block; width: 28vw; border-radius: 50px; margin-right: 7vw; } .button:hover { background-color: green; } .login { background-color: #DF6248; color: white; margin-top: 5vw; } .register { background-color: #DF6248; color: white; margin-top: 5vw; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/home.css"> </head> <body class=background> <button class="button login">LOGIN</button> <button class="button register">REGISTER</button> </body> </html>

solution3
 0  2018-08-14 16:39:49

It seemed like you wanted to align the buttons in the middle one below the other. To keep it responsive and to achieve what you wanted i made a few small changes:

Changed the button css -

1) width to 30%

2) min-width to 150px

3) margin-right to 35% //calculation : (100% - 30%)/2 

 body, html { margin: 0; height: 100%; } .background { height: 100%; background-image: url(../images/home-background.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .button { border: none; padding: 15px 25px; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; float: right; min-width: 150px; width: 30%; border-radius: 50px; position: relative; margin-right: 35%; } .button:hover { background-color: green; } .login { background-color: #DF6248; color: white; margin-top: 12vw; } .register { background-color: #DF6248; color: white; margin-top: 2vw; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/home.css"> </head> <body class=background> <button class="button login">LOGIN</button> <button class="button register">REGISTER</button> </body> </html>

solution4
 0  2018-08-14 16:44:00

Just move the float from your button to the container div 

<!doctype html>
  <html lang="en">
    <html>
      <style>
      body,
      html {
        margin: 0;
        height: 100%;
      }

      div{
      text-align:right;
      }

  .button {
    border: none;
    padding: 15px 25px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    width: 28vw;
    border-radius: 50px;
    position: relative;
    margin-right: 7vw;
  }

  .button:hover {
    background-color: green;
  }

  </style>

  <head>
    <title>HOME</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../css/home.css">
  </head>

  <body class=background>
  <div>
    <button class="button login">LOGIN</button>
  </div>
  <div>
    <button class="button register">REGISTER</button>
  </div>
  </body>

  </html>

solution5
 0  2018-08-14 16:45:43

Use display: block to the button takes up the whole width of parent block, so following button will be placed in new line. It is possible to use auto for horizontal margins to center your buttons. 

 body, html { margin: 0; height: 100%; } .background { height: 100%; background-image: url(../images/home-background.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .button { border: none; display: block; padding: 15px 25px; margin: 2vw auto; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; width: 28vw; border-radius: 50px; position: relative; } .login { background-color: #DF6248; color: white; } .register { background-color: #DF6248; color: white; } .button:hover { background-color: green; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/home.css"> </head> <body class=background> <button class="button login">LOGIN</button> <button class="button register">REGISTER</button> </body> </html>

solution6
 0  

 .layer { margin: 0 auto; display: table; margin-top: 34vh; /* you need to play a littl bit with the vh maybe something around 30-40vh*/ } #child1, #child2 { float: both; margin-left: 0px; margin-top: 0px; } .background { height: 100%; background-image: url(../images/home-background.jpg) no-repeat; background-position: center; background-size: cover; } .button { border: none; padding: 15px 25px; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; width: 28vw; border-radius: 50px; background-color: #DF6248; color: white; } .button:hover { background-color: green; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/home.css"> </head> <body> <body class="background"> <div class="layer"> <div class="child"> <button class="button child">LOGIN</button> </div> <br> <br> <div class="child"> <button class="button child">REGISTER</button> </div> </div> </body> </body> </html>

solution7
 0  2018-08-15 11:43:53

You can wrap each button in a div 

 body, html { margin: 0; height: 100%; } .background { height: 100%; background-image: url(../images/home-background.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; } .btn-container { text-align: center; } .button { border: none; padding: 15px 25px; text-align: center; font-weight: bold; font-size: 16px; cursor: pointer; float: none; clear: both; width: 28vw; border-radius: 50px; position: relative; margin-right: 7vw; } .button:hover { background-color: green; } .login { background-color: #DF6248; color: white; margin-top: 12vw; } .register { background-color: #DF6248; color: white; margin-top: 12vw; } 
 <!DOCTYPE html> <html> <head> <title>HOME</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="../css/home.css"> </head> <body class=background> <div class="btn-container"> <button class="button login">LOGIN</button> </div> <div class="btn-container"> <button class="button register">REGISTER</button> </div> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question images and buttons are not horizontally aligned Horizontally aligned radio buttons with another text box There are two buttons initially aligned horizontally but, If we increase the text of one button then two buttons should aligned vertically in Scss How to evenly space three horizontally aligned buttons with bootstrap 3? HTML/CSS Horizontally Aligned Buttons Not Filling Page As Expected Giving Horizontally Aligned Buttons A Fixed Position Within A Div jQuery tooltip not horizontally aligned? Input and button not aligned horizontally Divs not horizontally aligned My div are not aligned horizontally
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM