Nesting buttons under divs

user_11762164 0
Viewed 45

I am trying to have buttons centered below divs...very new at coding and working my way through courses. Ideally, the buttons would be responsive and follow the divs, wherever they may be (my code could be messy, not sure, sorry if it is :P) any tips?

.items {
  height:20rem;
  width:20rem;
  background-color:#7FDEFF;
  display:inline-block;
  margin:4em;
  display:center;
}

.items:hover {
  background-color: #9ce5ff;
}




    <section id="sale">
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
    </section>



</body>

</html>
css html
2 Answers

You can also do it without using flex, see below:

.column {
  text-align:center;
  margin-bottom: 1rem;
  padding: .5rem;
  width: 10rem;
}

.items {
  width: 100%;
  background-color: #7FDEFF;
  padding: 40px 0px;
  margin-bottom: 10px;
}

.items:hover {
  background-color: #9ce5ff;
}
    <section id="sale">
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
        <div class="column">
            <div class="items"></div>
            <button class="buy">Add to Cart</button>
        </div>
    </section>

The important steps are to

  • have text-align: center in the parent div
  • define a width for the parent div
  • define the child-div's width as 100% (thereby spreading to parent-div's width)
  • provide two values for child-div's padding. The first one (40px) makes sure there is some visible vertical space in the div, the second one (0px) makes it fill out the parent div horizontally.
user_26100610

You may try to wrap each one with a wrapper element (.content-wrapper). You can check the code below.

.items {
  height:20rem;
  width:20rem;
  background-color:#7FDEFF;
  margin:4em;
}

.content-wrapper{
display:flex;
flex-direction:column;
width:20rem;
align-items:center;
}
   <section id="sale">
   <div class="content-wrapper">
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        </div>
        <div class="content-wrapper">
        <div class="items"></div>
       
        <button class="buy">Add to Cart</button>
        </div>
        <div class="content-wrapper">
        <div class="items"></div>
        <button class="buy">Add to Cart</button>
        </div>
    </section>

user_138764300
Related