Jump to content

Search the Community

Showing results for tags 'css center box bottom center in container box'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 1 result

  1. 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}
×
×
  • Create New...