1

Tengo este código HTML:

<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:

introducir la descripción de la imagen aquí

Cómo puedo alinear los botones a la derecha pero, debajo del cuadro superior?. He intentado .btn-group { margin: 0 auto; } pero, no funciona.

2
  • ¿Se puede modificar el HTML o solo CSS?
    – Shaz
    Commented el 18 mar. 2018 a las 4:07
  • @Shaz ambos si es necesario.
    – RRGT19
    Commented el 18 mar. 2018 a las 4:08

2 respuestas 2

3

Modificando solo CSS, lo que propongo es darle las mismas propiedades de posicionamiento al contenedor de los botones y al "cuadro superior", posteriormente con flexbox alineo los botones al final (sé que hay otros métodos, pero personalmente prefiero 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>

1
  • Vale, ha funcionado a la perfección, muchas gracias.
    – RRGT19
    Commented el 18 mar. 2018 a las 4:20
1

Por qué no usas la solución más sencilla y eficiente ? 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;
}

De esta forma usando flexbox. todos los elementos que estén dentro de la clase padre. estarán centrados tanto horizontalmente como verticalmente.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.