CODEWITHSUNDEEP
htmlcssuser-interfacebutton
marcelo.wdrb
marcelo.wdrb

Reputation: 2339

Buttons doesnt show side by side above image

Here is a snippet of my Project Code: 

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
}

input, button {
  font-family: 'Montserrat', sans-serif;
}

.img_main_container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn_sign_up, .btn_login:hover {
  background: #5d8ffc;
  color: #fff;
  border: 1px solid #5d8ffc;
  border-radius: 5px;
  display: block;
  width: 300px;
  height: 40px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}

.btn_login, .btn_sign_up:hover {
  background-color: Transparent;
  background-repeat:no-repeat;
  color: #ffffff;
  border-radius: 5px;
  display: block;
  width: 300px;
  height: 40px;
  cursor:pointer;
  overflow: hidden;
  outline:none;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
}
<!DOCTYPE html>
<html>
  <body>

    <div class="img_main_container">
      <img src="https://natgeo.imgix.net/subjects/headers/ND%20header%20(1).jpg?auto=compress,format&w=1920&h=960&fit=crop" alt="Storm" style="width:100%;">
      <div class="centered">
        <button class="btn_sign_up">Sign up</button>
        <button class="btn_login">Login</button>
      </div>
    </div>
  </body>
</html>

Everything works as you can see. But I want that the two buttons are side by side like this in that image here: enter image description here

I tried so many examples but nothing worked. And I still can't figure out what's wrong here. It would be great if anyone could help. Thanks in advance. :)

Upvotes: 0

Views: 384

Answers (3)

Adnan
Adnan

Reputation: 100

Since you are using display:block on your buttons (.btn_sign_up, .btn_login), you can't make two buttons side by side, because block covering whole horizontal section.

Instead of this use display:inline-block and you will have buttons side by side.

More information you can get on the W3Schools

Upvotes: 1

Sai Krishna Konidena
Sai Krishna Konidena

Reputation: 31

Use Flexbox for this issue.This is the better solution. Add display: flex to the .centered class. .centered { display: flex; align-items: center}

Upvotes: 0

michele
michele

Reputation: 23

Flexbox would be a good solution for this. Add display: flex to the .centered class. This will place direct children of .centered side by side.

.centered {
  display: flex;
}

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 0

Related Questions