Nesting buttons under divs-CodePudding

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 ></div>
        <button >Add to Cart</button>
        <div ></div>
        <button >Add to Cart</button>
        <div ></div>
        <button >Add to Cart</button>
    </section>



</body>

</html>

CodePudding user response：

Check the below Html and Css. I think this is what you want?

#sale {
        display: flex;
        flex-wrap: wrap;
    }

    .column {
        margin-bottom: 1rem;
        padding: .5rem;
        flex: 0 0 25%;
    }

    .items {
        /* height: 20rem;
            width: 20rem; */
        background-color: #7FDEFF;
        padding: 5rem;
        /*remove 'padding: 5rem' when you add an image*/
        /* display: inline-block;
            margin: 4em;
            display: center; */
        margin-bottom: 1rem;
    }

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

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

CodePudding user response：

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 >
        <div ></div>
        <button >Add to Cart</button>
        </div>
        <div >
        <div ></div>
       
        <button >Add to Cart</button>
        </div>
        <div >
        <div ></div>
        <button >Add to Cart</button>
        </div>
    </section>

CodePudding user response：

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 >
            <div ></div>
            <button >Add to Cart</button>
        </div>
        <div >
            <div ></div>
            <button >Add to Cart</button>
        </div>
        <div >
            <div ></div>
            <button >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.