CSS - Div centrado horizontalmente y ajustado por su contenido

   
Vista:

Div centrado horizontalmente y ajustado por su contenido

Publicado por Roberto robysottini@gmail.com (2 intervenciones) el 30/10/2014 16:05:13
Hola.
Tengo un problema con los Divs hace varios días. Quiero que el div naranja esté acotado por el texto de su interior y que el texto esté alineado a la izquierda.
Busqué varios ejemplos en internet pero no encuentro la solución a mi problema. Encontré que usando position: absolute se puede solucionar, pero no quiero usar absolute porque trae más problemas que soluciones.
Dejo el código acá abajo. Y adjunto un dibujo de cómo debería verse en un navegador.

Gracias!!!

Roberto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
	<style>
			.principal {
				padding: 5px;
				border: 1px solid blue;
				background-color: lightblue;
			}
 
			.miFormulario {
				border: 1px solid red;
				background-color: orange;
			}
 
			.divCentrado {
				text-align: center;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<div class="principal">
			<div class="miFormulario">
				<div>Esta es la linea 1 y debe estar alineada a la izquierda.</div>
				<div>Esta es la linea 2 y debe estar alineada a la izquierda. Y es la mas larga de las tres lineas.</div>
				<div>Esta es la linea 3 y debe estar alineada a la izquierda. Bla, bla, bla.</div>
				<div class="divCentrado">Esta linea 4 esta bien centrada.</div>
			</div>
		</div>
	</body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Leonardo Daniel A.

Div centrado horizontalmente y ajustado por su contenido

Publicado por Leonardo Daniel A. (1 intervención) el 30/10/2014 16:37:43
Hola no se mucho de css, pero te recomiendo empiezes a ver mejor BootStrap que te facilita mucho el diseño


https://mega.co.nz/#!BsESzDKB!4-lBo5eMUQ9GYyBeKEaHscM6IZkXR2NMSCu1nXo_IMM


comprimido con 7-zip
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Div centrado horizontalmente y ajustado por su contenido

Publicado por xve (351 intervenciones) el 30/10/2014 22:12:56
Hola Roberto, prueba a modificar el estilo de la clase .miFormulario añadiendo estas dos lineas...

1
2
3
4
5
6
.miFormulario {
	border: 1px solid red;
	background-color: orange;
	width:600px;
	margin:auto;
}

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Div centrado horizontalmente y ajustado por su contenido

Publicado por Roberto (2 intervenciones) el 30/10/2014 23:31:15
¡Gracias, xve!

Esto lo probé, pero el ancho del div queda fijo a 600px. Yo necesito que se ajuste según el texto que contiene.

Roberto
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de xve

Div centrado horizontalmente y ajustado por su contenido

Publicado por xve (351 intervenciones) el 31/10/2014 11:21:17
Hola Roberto, entonces, te quedaria así... te he marcado en negrita los cambios:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<html>
<head>
	<style>
			.principal {
				padding: 5px;
				border: 1px solid blue;
				background-color: lightblue;
				text-align:center;
			}
 
			.miFormulario {
				display:inline-block;
				border: 1px solid red;
				background-color: orange;
				text-align:left;
			}
 
			.divCentrado {
				text-align: center;
				border: 1px solid green;
			}
		</style>
	</head>
	<body>
		<div class="principal">
			<div class="miFormulario">
				<div>Esta es la linea 1 y debe estar alineada a la izquierda.</div>
				<div>Esta es la linea 2 y debe estar alineada a la izquierda. Y es la mas larga de las tres lineas.</div>
				<div>Esta es la linea 3 y debe estar alineada a la izquierda. Bla, bla, bla.</div>
				<div class="divCentrado">Esta linea 4 esta bien centrada.</div>
			</div>
		</div>
	</body>
</html>

Coméntanos, ok?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar