Duda con las medidas en porcentajes de CSS %

SCM · 3 Junio 2013, 03:12 AM

Hola a todos.

Bueno, pues hay algo con lo que me como bastante el coco y es con los porcentajes en CSS, que no entiendo muy bien como funciona..

En teoría, si coloco padding-top: 50%; como en esta imagen, no se debería ver el texto justo en la mitad de la web???

Sin embargo fijaos que sale muy abajo..

En un div de medidas que coloque yo fijas si que se como funciona. Lo coloco a 50% y tengo que restarle en margen el width/2 y el height/2.

Como puedo hacer que ese texto salga centrado con porcentajes?? Gracias, un saludo.

EFEX · 3 Junio 2013, 14:35 PM

Código (css) [Seleccionar]

padding-left:50%

#!drvy · 3 Junio 2013, 15:15 PM

Padding y margin no funcionan exactamente de esa forma al parecer (es algo que nunca llegue a entender xD). En su caso se tendría que utilizar top/bottom y left/right

Código (css) [Seleccionar]

<!doctype html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
   html,body {margin:0; padding:0;}
   .wrap {
      top:50%; left:50%; position:absolute;
      /* Maximo width 80%. Se le resta la mitad para centrar. */
      width:80%; margin-left:-40%;
      background:#CCC;
   }
   .wrap h1 {padding:0; margin:0;}
</style>
</head>

<body>
   <div class="wrap">
      <div class="contenido">
         <h1>Este es mi contenido</h1>
      </div>
   </div>
</body>
</html>

jsFiddle Demo

Saludos

WHK · 3 Junio 2013, 20:02 PM

CitarComo puedo hacer que ese texto salga centrado con porcentajes?? Gracias, un saludo.

Un texto con text-align: center y padding left con %.

Ahora, si lo que quieres es poner un bloque de contenidos de manera centrada puedes utilizar margin auto:

Código [Seleccionar]

<div style="width: 200px; margin: 0 auto; background-color:red;">Hola</div>

http://jsfiddle.net/ZXVjG/

Código (html4strict) [Seleccionar]

<div style="width: 200px; margin: 0 auto; background-color:red;">Hola</div>
<br />

<div style="text-align: center; width: 200px; margin: 0 auto; background-color:red;">Hola</div>
<br />

<div style="text-align: center; background-color:red;">Hola</div>

Saludos.

SCM · 4 Junio 2013, 22:47 PM

Gracias por las respuestas.

Mi pregunta no iba por ahí (iba más por donde ha contestado drvy). Me refiero, que poniendo padding-top: 50%; según el código éste debería centrar el div verticalmente de forma automática, pues le estás diciendo que tenga un padding de la mitad del body respecto al borde superior. Sin embargo colocas eso y se te pone casi abajo del todo, como si hubieras colocado un padding-top: 85%;

Entonces, no entiendo exactamente como funciona el padding con porcentajes. Por qué poniéndole 50% me lo coloca mucho más abajo de la mitad de la página.
Asimismo, poniendo padding-left: 50%; te lo va a tirar muy hacia la derecha, demasiado. Para centrarlo con porcentajes tendrías que colocar aproximadamente padding-left: 25%;
Eso es lo que no entiendo, que poniéndole un cuarto de lo que debería ser el 100%, te lo ponga en el centro, y que poniéndole la mitad, que es lo que debería funcionar (50%) se vaya tanto hacia el extremo.

Estas lineas no las entendí, por cierto:

Código (css) [Seleccionar]

/* Maximo width 80%. Se le resta la mitad para centrar. */
      width:80%; margin-left:-40%;

Por qué se le coloca un width del 80% y luego se le resta la mitad?

Marcando un width se puede centrar muy facilmente, así es. Colocando width: 400px y margin: auto se centra por si mismo horizontalmente.

Sin embargo el problema viene cuando lo quieres centrar verticalmente o cuando no quieres que el div tenga unas medidas fijas.. es decir, si yo quiero que se amplie conforme se le coloque contenido y se centre al mismo tiempo tendría que recurrir a una tabla? Hablo de centrar un div, no el texto de dentro. El texto de dentro se puede centrar con text-align, pero lo centras dentro del div, no centras el div.

Otra forma de centrarlos es recurrir a javascript, coger las medidas de la página desde el navegador de esa persona y dividirlas entre dos y tal.. pero yo quería saber si había una forma de centrar vertical y horizontalmente con CSS sin tener que darle un width y un height concreto al div, es decir, que éste pueda ampliarse.
Eso es posible??

Un saludo y muchas gracias por la ayuda!

Aquí está con paddings, y si el resultado se ve a pantalla completa comprobaréis que no centra con el 50%.

http://jsfiddle.net/HK4gk/1/

Test Foro de elhacker.net SMF 2.1

Duda con las medidas en porcentajes de CSS %

SCM

EFEX

#!drvy

WHK

SCM