Jeff Miller

[Jeff Miller]

Hi,  I'm trying to figure out how to place three buttons/boxes to the bottom center of another box.  I have a back-ground image sitting on top of a gray box that extends slightly below the background image and I want to place three buttons in each respective gray selection to the bottom of the image.  I've you-tubed and their suggestions aren't working.  I must have done something wrong that is counterproductive of me centering the box to the bottom center.

 

Below is the HTML and CSS code and if anyone can tell me what I'm doing wrong would be awesome....Thanks,

Jeff

v>

<!--        =======HTML==========   -->

<div id="boxcontainer">
        <div class="bankbox box">
            <h2>Bank and Credit Card Account Reconciliation</h2>
            <div class="button">
                <span><a href="#">Learn More</a></span>
            </div>    
        </div>
        
        <div class="apbox box">
            <h2>Accounts Payable and Accounts Receivable</h2>
                <div class="button">
                    <span><a href="#">Learn More</a></span>
                </div> 
        </div>
        
        <div class="financialbox box">   
            <h2>Financial and Operational Reporting</h2>
                <div class="button">
                    <span><a href="#">Learn More</a></span>
                </div> 
        </div>
    </div>

/*=================CSS=================*/

#boxcontainer{
    width:100%;
    height: auto;
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    flex-flow: wrap;
    position: center;}

.box{
    display: inline-block;
    float:inherit;
    width: 275px;
    height: 275px;
    margin: 2px;
    background-color: gray;}

/* Three buttons in the boxes*/
.button a{  
    box-sizing: border-box;
    color:white;
    background-color: #008CBA;
    border: .1em solid #008CBA;
    padding: 3% 10%;
    text-align: center;
    text-decoration:none;
    display: inline-flex;
    vertical-align:bottom;
    margin:200 200em  auto;
    position: 10% 50%;}

.button a:hover{
    transition-duration: 0.6s;
    background-color: white;
    color:#008CBA;}

/* Bank and Credit Card Recon Boxes w/ heading and buttons */
.bankbox{
    background-image:url(../Images/FinancialImage.jpg);
    background-size: 250px;
    background-repeat: no-repeat;
    background-size:contain;
    border: .5em solid white;
    color:#f4c900;
    padding:1em;}

.bankbox h2{
    color:#f4c900;
    text-align: center;
    margin:0 auto;}

/* AP & AR Boxes w/ heading and buttons */
.apbox{
    background-image: url(../Images/APImage.jpg);
    background-size: 250px;
    background-repeat: no-repeat;
    background-size:contain;
    border: .5em solid white;
    color:#f4c900;
    padding:1em;}

.apbox h2{
    color:#f4c900;
    text-align: center;
    margin:0 auto}

/* Financial and Operational Reporting Boxes w/ heading and buttons */
.financialbox{
    background-image: url(../Images/ReportingImage.jpg);
    background-repeat: no-repeat;
    background-size:130%; /* <= Adjust the picture to be the same as the others*/
    border: .5em solid white;
    color:#f4c900;
    padding:1em;}

.financialbox h2{
    color:#f4c900;
    text-align: center;
    margin:0 auto}
 

[JMRKER]

Try adding:

	.btnBottom { position: relative; bottom: -175px; left: 75px; }
	

And modifying:

	                <div class="button btnBottom">
                    <span><a href="#">Learn More</a></span>
                </div>

for each of the buttons.

 

[dsonesuk]

IF you plan to use flex-box use it all! not partially, also value without unit ( margin:200 200em  auto;) and invalid property value (position: center;) don't help. 

https://www.w3schools.com/code/tryit.asp?filename=G66FDJDIFDZL

Edited July 19, 2019 by dsonesuk
improved

[dsonesuk]

https://www.w3schools.com/code/tryit.asp?filename=G66Q88TG785O