CODEWITHSUNDEEP
htmlcss
Arr
Arr

Reputation: 33

Aligning CSS objects above <hr> tags

Here's my code for my small project (I'm very new to this):

body {
  background-color: #242424;
}

.page-wrap {
  width: 90%;
  margin: 0 auto;
  height: 98vh;
}

.buildings-wrap {
  width: 95%;
  margin: 0 auto;
  height: 100%;
  text-align: middle;
}

.rectangle {
  height: 650px;
  background-color: lightblue;
  width: 215px;
}

.add_btn {
  border-radius: 50%;
  background-color: lightcyan;
  text-align: center;
  line-height: 150px;
  height: 150px;
  width: 150px;
  margin: 0 auto;
  font-size: 100px;
  font-weight: 900;
  position: fixed;
  top: 85%;
}
<div class="page-wrap">
  <div class="buildings-wrap">
    <br/>
    <div class="rectangle"></div>
    <hr style="position: fixed;top: 80%;color: white;width: 84%;" />
    <button class="add_btn">+</button>
  </div>
</div>

Here's what it looks like. The arrow show where I would like them to be.

I can't figure out how to do this:

enter image description here

Upvotes: 0

Views: 226

Answers (2)

Ashik Paul
Ashik Paul

Reputation: 504

Please view in full-page view

Hope this helps

body {
  background-color: #242424;
}

.page-wrap {
  width: 90%;
  margin: 0 auto;
  height: 98vh;
}

.buildings-wrap {
  width: 95%;
  margin: 0 auto;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.rectangle {
  height: 81vh;
  background-color: lightblue;
  width: 200px;
}

.add_btn {
  border-radius: 50%;
  background-color: lightcyan;
  text-align: center;
  line-height: 50px;
  height: 16vh;
  width: 120px;
  margin: 0 auto;
  font-size: 100px;
  font-weight: 600;
  position: fixed;
  top: 84%;
}
<div class="page-wrap">
  <div class="buildings-wrap">
    <br/>
    <div class="rectangle"></div>
    <hr style="position: fixed;top: 80%;color: white;width: 84%;" />
    <button class="add_btn">+</button>
  </div>
</div>

Upvotes: 0

Matt Croak
Matt Croak

Reputation: 2888

In order to align the rectangle above the hr tag, you can simply give it a display of block and a margin of auto. This will center the rectangle relative to the container.

As for aligning the add button to the center while keeping it fixed, you can wrap the button in a div, give that div a position of fixed and a width of 100%. Then give it a display of flex and justify-content of center. This will center align any children that are in the div.

Depending on how low you want the add button, you can set the bottom property for the newly create div. At the moment I have it at -125px. It's also better to use bottom and pixels as the units because the other elements have fixed sizes.

body{
    background-color: #242424;
}
.page-wrap {
    width: 90%;
    margin: 0 auto;
    height: 98vh;
}
.buildings-wrap{
    width: 95%;
    margin: 0 auto;
    height: 100%;
    text-align: middle;
}
.rectangle{
    height: 650px;
    background-color: lightblue;
    width: 215px;
    display: block;
    margin:auto;
}
.add_btn{
    border-radius: 50%;
    background-color: lightcyan;
    text-align: center;
    line-height: 150px;
    height: 150px;
    width: 150px;
    margin: 0 auto;
    font-size: 100px;
    font-weight: 900;
}

hr{
  margin: 0 auto 0 auto;
}
<div class="page-wrap">
        <div class="buildings-wrap">
            <br/>
            <div style="display: flex; margin: auto;"><div class="rectangle"></div></div>
            <hr/>
            <div style="width: 100%; display:flex; justify-content: center;position: fixed; bottom: -125px; left: 0;"><button class="add_btn">+</button></div>
        </div>
 </div>

Upvotes: 1

Related Questions