¿Cómo colocar 2 botones en la parte inferior de un banner?

Puedo hacer un padding: 462px, pero creo que hay otra solución.

De hecho, estoy buscando una solución con un código claro. Si conoces una propiedad para solucionar mi problema, me interesa.

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    padding: 462px;
}

IMAGEN

/*******************************/
/********* General CSS *********/
/*******************************/

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

a {
    text-decoration: none;
    transition: .3s;
    color: black;
}

/**********************************/
/********** Top Bar CSS ***********/
/**********************************/

.top-bar {
    position: relative;
    height: 45px;
}

.container { 
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 80%;
}

.top-bar .top-bar-left {
    display: flex;
}

.top-bar .text {
    display: flex;
    align-items: center; /* aligne les éléments sur la même ligne */ 
    justify-content: center;
    height: 50px;
    margin-right: 10px;
}

.top-bar .text i {
    color: #C22312;
    margin-right: 5px;
}

.top-bar .text h2{
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
    margin-right: 10px;
}

.top-bar .top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

.top-bar .hyper-text  {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    text-transform: uppercase;
}

.top-bar .hyper-text i {
    color: black;
    margin-right: 5px;
    margin-left: 5px;
}

/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/

.navbar {
    position: relative;
}

.navbar .navbar-transparent {
    background-color: #2a2a2a;
    height:95px;
}

.navbar .navbar-brand {
   padding: 20px 0;
}


.navbar .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
   
}

.navbar .navbar-nav a {
    color: #fff;
    text-transform: uppercase;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 3px;
    padding: 7px 13px;
}

.navbar .navbar-nav a:hover {
    background-color: #fff;
    border-radius: 3px;
    color: #2a2a2a;
}

.navbar .navbar-nav a.active {
    background-color: #C22312;
    transition: .5s;
    color: #fff;
}

/*******************************/
/********** Money CSS ***********/
/*******************************/

#money {
    background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
    height: 565px;
    width: 100%;
    background-size: cover; /* dézoomage */ 
}

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    padding: auto 0;
}

#money .btn-money a {
    color: #fff;
}

#money .btn-registrer {
    background-color: #c22312;
    padding: 8px 20px;
}

#money .btn-login {
    background:rgba(0,0,0,0);
    padding: 4px 20px;
    border: 3px solid #fff;
}
<!doctype html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
      <title>title </title>
      <!-- Google Font -->
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
      <!-- CSS Libraries -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
      <!-- Template Stylesheet -->
    
   </head>
   <body>
      <!-- Top Bar Start -->
      <div class="top-bar">
         <div class="container">
            <div class="top-bar-left">
               <div class="text">
                  <i class="far fa-calendar"></i>
                  <h2>138 runnings days</h2>
               </div>
               <div class="text">
                  <i class="far fa-envelope"></i>
                  <h2>admin@superbtc.biz</h2>
               </div>
            </div>
            <div class="top-bar-right">
               <div class="hyper-text">
                  <select name="language" id="language-select">
                     <option value="english">English</option>
                     <option value="french">French</option>
                  </select>
                  <a href="#"><i class="fas fa-angle-right"></i>Deposit</a>
                  <a href="#"><i class="fas fa-angle-right"></i>Paidout</a>
               </div>
            </div>
         </div>
      </div>
      <!-- TOP Bar End -->
      <!-- Nav Bar Start -->
      <div class="navbar">
         <div class="navbar-transparent">
            <div class="container">
               <div class="navbar-brand ">
                  <img src="https://zupimages.net/up/21/21/2bac.png" alt="Nav Image">
               </div>
               <div class="navbar-nav">
                  <a href="#" class="nav-link active">Home</a>
                  <a href="#" class="nav-link">About</a>
                  <a href="#" class="nav-link">Investment Plans</a>
                  <a href="#" class="nav-link">News</a>
                  <a href="#" class="nav-link">Faq</a>
                  <a href="#" class="nav-link">Rules</a>
                  <a href="#" class="nav-link">Contact Us</a>
               </div>
            </div>
         </div>
      </div>
      <!-- Nav Bar End -->
      <!-- Money Start -->
      <div id="money">
         <div class="btn-money">
            <a href="#" class="btn-registrer">Register</a>
            <a href="#" class="btn-login">Login</a>
         </div>
      </div>
      <!-- Money End -->
   </body>
</html>
0
bouns 5 oct. 2021 a las 01:07

4 respuestas

La mejor respuesta

Puede hacerlo haciendo que la posición del elemento padre sea relativa:

#money {
    background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
    height: 565px;
    width: 100%;
    background-size: cover; /* dézoomage */ 
    position: relative;
}

Y luego puede hacer que la posición del elemento secundario sea absoluta con bottom: 0 y width: 100%:

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    padding: auto 0;
  position :absolute;
  bottom : 0;
width: 100%;
}
/*******************************/
/********* General CSS *********/
/*******************************/

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

a {
    text-decoration: none;
    transition: .3s;
    color: black;
}

/**********************************/
/********** Top Bar CSS ***********/
/**********************************/

.top-bar {
    position: relative;
    height: 45px;
}

.container { 
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 80%;
}

.top-bar .top-bar-left {
    display: flex;
}

.top-bar .text {
    display: flex;
    align-items: center; /* aligne les éléments sur la même ligne */ 
    justify-content: center;
    height: 50px;
    margin-right: 10px;
}

.top-bar .text i {
    color: #C22312;
    margin-right: 5px;
}

.top-bar .text h2{
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 400;
    text-transform: uppercase;
    margin-right: 10px;
}

.top-bar .top-bar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

.top-bar .hyper-text  {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    text-transform: uppercase;
}

.top-bar .hyper-text i {
    color: black;
    margin-right: 5px;
    margin-left: 5px;
}

/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/

.navbar {
    position: relative;
}

.navbar .navbar-transparent {
    background-color: #2a2a2a;
    height:95px;
}

.navbar .navbar-brand {
   padding: 20px 0;
}


.navbar .navbar-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end; 
   
}

.navbar .navbar-nav a {
    color: #fff;
    text-transform: uppercase;
    margin-left: 10px;
    font-size: 14px;
    border-radius: 3px;
    padding: 7px 13px;
}

.navbar .navbar-nav a:hover {
    background-color: #fff;
    border-radius: 3px;
    color: #2a2a2a;
}

.navbar .navbar-nav a.active {
    background-color: #C22312;
    transition: .5s;
    color: #fff;
}

/*******************************/
/********** Money CSS ***********/
/*******************************/

#money {
    background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
    height: 565px;
    width: 100%;
    background-size: cover; /* dézoomage */ 
    position: relative;
}

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    padding: auto 0;
  position :absolute;
  bottom : 0;
width: 100%;
}

#money .btn-money a {
    color: #fff;
}

#money .btn-registrer {
    background-color: #c22312;
    padding: 8px 20px;
}

#money .btn-login {
    background:rgba(0,0,0,0);
    padding: 4px 20px;
    border: 3px solid #fff;
}
<!doctype html>
<html lang="fr">
   <head>
      <meta charset="utf-8">
      <title>title </title>
      <!-- Google Font -->
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet">
      <!-- CSS Libraries -->
      <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
      <!-- Template Stylesheet -->
    
   </head>
   <body>
      <!-- Top Bar Start -->
      <div class="top-bar">
         <div class="container">
            <div class="top-bar-left">
               <div class="text">
                  <i class="far fa-calendar"></i>
                  <h2>138 runnings days</h2>
               </div>
               <div class="text">
                  <i class="far fa-envelope"></i>
                  <h2>admin@superbtc.biz</h2>
               </div>
            </div>
            <div class="top-bar-right">
               <div class="hyper-text">
                  <select name="language" id="language-select">
                     <option value="english">English</option>
                     <option value="french">French</option>
                  </select>
                  <a href="#"><i class="fas fa-angle-right"></i>Deposit</a>
                  <a href="#"><i class="fas fa-angle-right"></i>Paidout</a>
               </div>
            </div>
         </div>
      </div>
      <!-- TOP Bar End -->
      <!-- Nav Bar Start -->
      <div class="navbar">
         <div class="navbar-transparent">
            <div class="container">
               <div class="navbar-brand ">
                  <img src="https://zupimages.net/up/21/21/2bac.png" alt="Nav Image">
               </div>
               <div class="navbar-nav">
                  <a href="#" class="nav-link active">Home</a>
                  <a href="#" class="nav-link">About</a>
                  <a href="#" class="nav-link">Investment Plans</a>
                  <a href="#" class="nav-link">News</a>
                  <a href="#" class="nav-link">Faq</a>
                  <a href="#" class="nav-link">Rules</a>
                  <a href="#" class="nav-link">Contact Us</a>
               </div>
            </div>
         </div>
      </div>
      <!-- Nav Bar End -->
      <!-- Money Start -->
      <div id="money">
         <div class="btn-money">
            <a href="#" class="btn-registrer">Register</a>
            <a href="#" class="btn-login">Login</a>
         </div>
      </div>
      <!-- Money End -->
   </body>
</html>
0
Inam 4 oct. 2021 a las 22:17

Puede usar display: flex para colocar un elemento en la parte inferior.

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    flex: content;
    align-self: end;
}

#money {
    background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
        background-size: auto;
    height: 565px;
    width: 100%;
    background-size: cover;
    display: flex;
}

0
Vulcainos 4 oct. 2021 a las 22:16

Utilice Flexbox para esto. Configure la visualización de <div id="money"> en flex. Luego, puede colocarlo con justify-content y align-items.

#money {
    background: url('https://zupimages.net/up/20/20/vreu.jpg') no-repeat;
    height: 565px;
    width: 100%;
    background-size: cover; /* dézoomage */ 
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

#money .btn-money {
    text-align: center;
    text-transform: uppercase;
    font-size: 26px;
    padding: auto 0;
}
0
Michael 4 oct. 2021 a las 22:18

Con flexbox puede alinear el div .btn-money en la parte inferior del elemento principal, agregué un margen al elemento secundario para evitar el desbordamiento.

Las lineas que he agregado

#money {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.btn-money {
    margin-bottom: 30px;
}
0
Umberto Fontanazza 4 oct. 2021 a las 22:24