How can I move a button inside of a div to the right and keep things aligned?

Question

So I've been stuck at this problem for hours. I've tried to use "float: right" and , yes, I was able to move the button to the right, however, when I do this, the tag is not vertically centered anymore.

Can you please help me? Btw, if there is more than one solution to the problem, I would be extremely thankful to see.

* {
    box-sizing: border-box;
}

body {
    font-family: 'Montserrat', sans-serif;
    margin:0;
}

h1{
    margin: 5rem 0 0 1.5rem;
}

.main-nav{
    background-color: #2ddd5c;
    position: fixed;
    top:0; 
    width: 100vw; 
    z-index: 1;
    padding: 0.5rem 1rem;

}

.main-nav-brandtitle {
    display: inline-block;
    vertical-align: middle;
    padding-left: 0.5rem;
}

.main-nav-brandtitle a{ 
    height: 2.3rem;
    vertical-align: middle;
}

.main-nav-butaum{
    display: inline-block;
    vertical-align: middle;
}

.toggle-button {
    width: 3rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
    text-align: center;
}


.toggle-button__bar {
    width: 100%;
    height: 0.2rem; 
    background: black;
    display: block;
    margin: 0.6rem 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link rel="stylesheet" href="../shared4.css">
    <link rel="stylesheet" href="hosting.css">
    <title>test</title>
</head>
<body>
    <div class=backdrop>

    </div>
<header>
    <nav class= "main-nav">
        <div class="main-nav-brandtitle">
                <a href="../index.html"><img src="" alt = "">Hellou</a>
        </div>
        <div class="main-nav-butaum">
            <button class="toggle-button">
                <span class="toggle-button__bar"></span>
                <span class="toggle-button__bar"></span>
                <span class="toggle-button__bar"></span>
            </button>
        </div>
    </nav>
</header>



<main>
<h1>test</h1>
</main>
</body>
</body>
</html>

If an answer helped you, then please mark it as correct. – Timothy Alexis Vass Jul 25 '21 at 09:16 — Timothy Alexis Vass, Jul 25 '21 at 09:16

score 1 · Answer 1 · answered Jan 28 '21 at 15:51

Add these flex properties to your .main-nav and remove the vertical-align from the logo and menu button.

  display: flex;
  justify-content: space-between;
  align-items: center;

Example:

* {
  box-sizing: border-box;
}

body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
}

h1 {
  margin: 5rem 0 0 1.5rem;
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #2ddd5c;
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 1;
  padding: 0.5rem 1rem;
}

.main-nav-brandtitle {
  display: inline-block;
  padding-left: 0.5rem;
}

.main-nav-brandtitle a {
  height: 2.3rem;
}

.main-nav-butaum {
  display: inline-block;
}

.toggle-button {
  width: 3rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding-top: 0;
  padding-bottom: 0;
  vertical-align: middle;
  text-align: center;
}

.toggle-button__bar {
  width: 100%;
  height: 0.2rem;
  background: black;
  display: block;
  margin: 0.6rem 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
  <link rel="stylesheet" href="../shared4.css">
  <link rel="stylesheet" href="hosting.css">
  <title>test</title>
</head>

<body>
  <div class=backdrop>

  </div>
  <header>
    <nav class="main-nav">
      <div class="main-nav-brandtitle">
        <a href="../index.html"><img src="" alt="">Hellou</a>
      </div>
      <div class="main-nav-butaum">
        <button class="toggle-button">
                <span class="toggle-button__bar"></span>
                <span class="toggle-button__bar"></span>
                <span class="toggle-button__bar"></span>
            </button>
      </div>
    </nav>
  </header>



  <main>
    <h1>test</h1>
  </main>
</body>
</body>

</html>

Josoe Santos · Answer 2 · 2021-01-28T16:52:30.230

0

Try using flexbox (reference) or grid(ref. here) on this case:

Using flexbox:

.main-nav-butaum {
  display: flex;
  justify-content: flex-end;
}

Using grid:


.main-nav-butaum {
  display: grid;

}

.toggle-button {
  justify-self: end;
}

Both solutions have it's advantages and disadvantages. Which is why I suggest, if you are new to css grid or flexbox, to read a little about those two powerful tools.

edited Jan 28 '21 at 16:52

answered Jan 28 '21 at 15:59

Josoe Santos

1
1
3

How can I move a button inside of a div to the right and keep things aligned?

2 Answers2