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 have tried .btn-group { margin: 0 auto; }
but, it doesn't work.
Modifying only CSS, what I propose is to give the same positioning properties to the button container and to the "top box", then with flexbox I align the buttons at the end (I know there are other methods, but personally I prefer flexbox):
Why don't you use the simplest and most efficient solution? flex box
html
css
This way using flexbox. all elements that are inside the parent class. they will be centered both horizontally and vertically.