[SOLUCIONADO] Centrar elemento dentro del DIV padre.

bralmu · #1 (**permalink**) 27/11/2013, 08:14

Hola,

Estoy atascado intentando colocar un elemento en el centro del DIV que lo contiene (tanto horizontal como verticalmente). He estado buscando pero no encuentro la solución. Adjunto el problema.

Código:

<html>
<head>
<title>Test</title>
<style>
div {
    position: relative;
    width: 180px;
    height: 180px;
    background-color: yellow;
}
div p {
    position: absolute;
    top: 0;
}
</style>
</head>
<body>
    <div>
        <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Cercle_bleu_100%25.svg/200px-Cercle_bleu_100%25.svg.png" width="180px" height="180px" alt="ring">
        <p>Centrame</p>
    </div>
</body>
</html>

Querría que el <p>Centrame</p> estuviese en el centro del <div>

Un saludo.

IsaBelM · #2 (**permalink**) 27/11/2013, 08:42

para centrar un elemento verticalmente has de usar la propiedad display con el valor table en el contenedor y display: table-cell y vertical-align: middle en el bloque a centrar

alzacon · #3 (**permalink**) 27/11/2013, 09:10

Si no es necesario tener la imagen en la etiqueta img (es decir que puedes ponerla como fondo), puedes usar:

Código CSS:

Ver originaldiv {
  display: flex;
  ...
}
div p {
  margin: auto;
}

TSG · #4 (**permalink**) 27/11/2013, 10:42

Puedes poner en el css del div padre:

Código CSS:

Ver originaltext-align: center;

pzin · #5 (**permalink**) 27/11/2013, 10:44

Otra forma:

Código CSS:

Ver originaldiv p {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0;
  transform: translate(-50%,-50%);
}

Habría que usar prefijos propietarios -webkit- y demás para mejor compatibilidad.

bralmu · #6 (**permalink**) 27/11/2013, 12:32

Muchas gracias a todos. Ya está solucionado. Al final me he quedado con la solución de alzacon.

IsaBelM · #7 (**permalink**) 27/11/2013, 14:57

no es por ser replicante pero ie no soporta la propiedad display con el valor flex y ff en ciertas circunstancias tampoco

las dos opciones cross-browser son las expuestas por pzin y por mi. todo depende del grado de compatibilidad que quieras

pzin - todos los navegadores modernos
yo - todos los navegadores modernos incluido ie8

bralmu · #8 (**permalink**) 28/11/2013, 07:37

Tienes razón IsaBelM. Hoy he comprobado que la solución de alzacon funciona bien en Firefox y Chrome pero luego he visto que no va bien en Android, Opera, Safari ni IE11. Fue la primera que probé porque parecía más sencilla.

He encontrado esta otra:
http://www.html5rocks.com/es/tutorials/flexbox/quick/

Código:

div {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-pack: center;
    -moz-box-align: center;

    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}

Voy a probar esta y todas vuestras soluciones con más tranquilidad. Creo que le dí al botón de solucionado precipitadamente.

Un saludo.