Center div below another div in CSS

Navigation
1

I have this HTML code: 

<body>

<div class="center">
En este sitio web se usan los siguientes servicios:

<dl>
  <dt>S3</dt>
  <dd>- Usaremos un S3 Bucket.</dd>
</dl>

Para comenzar, por favor haga clic en uno de los dos botones que están debajo.
</div>

<div class="btn-group">
  <button>Iniciar Sesión</button>
  <button>Registrarse</button>
</div>

</body>

CSS: 

/* Box */
.center {
    margin: auto;
    width: 50%;
    border: 3px solid #333;
    padding: 10px;
    margin-bottom: 10px;
}
/* List of Services */
dt {
    font-weight: bold;
    text-decoration: underline;
  }
dd {
    margin: 0;
    padding: 0 0 1em 0;
}
/* Button */
.btn-group {
    margin: 0 auto;
    }
.btn-group button {
    background-color: #4CAF50; /* Green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #3e8e41;
}
/* Footer */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
}

Screenshot:

How can I align the buttons to the right but, below the top box? I tried .btn-group { margin: 0 auto; } but, it does not work.

    
asked by Robert Gomez 18.03.2018 в 05:02
source

2 answers

2

Modifying only CSS, what I propose is to give the same positioning properties to the container of the buttons and the "upper box", later with flexbox I align the buttons at the end (I know there are other methods, but I personally prefer flexbox): 

/* Box */
.center {
    margin: auto;
    width: 50%;
    border: 3px solid #333;
    padding: 10px;
    margin-bottom: 10px;
}
/* List of Services */
dt {
    font-weight: bold;
    text-decoration: underline;
  }
dd {
    margin: 0;
    padding: 0 0 1em 0;
}
/* Button */
.btn-group {
    display: flex;
    justify-content: flex-end;
    margin: 0 auto;
    width: calc(50% + 20px);
    }
.btn-group button {
    background-color: #4CAF50; /* Green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Some padding */
    cursor: pointer; /* Pointer/hand icon */
    float: left; /* Float the buttons side by side */
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #3e8e41;
}
/* Footer */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #333;
    color: white;
    text-align: center;
}
<div class="center">
En este sitio web se usan los siguientes servicios:

<dl>
  <dt>S3</dt>
  <dd>- Usaremos un S3 Bucket.</dd>
</dl>

Para comenzar, por favor haga clic en uno de los dos botones que están debajo.
</div>

<div class="btn-group">
  <button>Iniciar Sesión</button>
  <button>Registrarse</button>
</div>
    
answered by 18.03.2018 / 05:11
source
0

Why do not you use the simplest and most efficient solution? Flexbox

html 

<div class="padre">
    <div class="hijo1">
        ...
    </div>
    <div class="hijo2">
        ...
    </div>
</div>

css 

.padre {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

In this way using flexbox. all the elements that are inside the parent class. they will be centered both horizontally and vertically.

    
answered by 19.03.2018 в 18:07
C # Entity with id Guid does not allow me to register in database How to add marked items to a checklistbox and how to delete them