poner - CSS, div centrado, reducir para encajar?
centrar texto horizontalmente css (9)
¿Algo como esto?
<html>
<head>
</head>
<body style="text-align: center;">
<div style="width: 500px; margin: 0 auto;">
<p>text text text text text text text text text text text text text text text text text text text text text text</p>
<div>hello</div>
<p>text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</body>
Esto es lo que quiero:
text text text text text text text text text text text
text text text text text text text text text text text
+-----------+
| some text |
+-----------+
text text text text text text text text text text text
text text text text text text text text text text text
... donde el bloque "algún texto" es un div. Quiero que el div sea el ancho mínimo necesario para contener su texto sin envolver. Si el texto es demasiado largo para ajustarse sin envolverse, entonces está bien si se ajusta.
NO quiero establecer un ancho explícito para el div. No quiero establecer el ancho mínimo o el ancho máximo tampoco; como dije, si hay demasiado texto para contener en una línea sin ajustar, entonces está bien si se ajusta.
Apoyos a Josh Stodola, aunque no estaba exactamente en lo cierto. La propiedad necesaria es:
display: inline-block;
Lo que ha solucionado mi problema. ¡Hurra!
Aquí hay un ejemplo que hice exactamente de lo que estás buscando:
(jsFiddled aquí: http://jsfiddle.net/yohphomu/ )
Advertencia:
Soy un fanático de CSS !!!
Si entiendo su pregunta correctamente, no hay necesidad de establecer una altura o anchura porque su configuración predeterminada es automática (dicho esto puede decirse que puede usar automática), pero el único problema con esto es que si desea cambiar el fondo o poner un borde lo hará más alrededor del campo deseado. Por qué es eso y cómo lo arreglamos, sigue leyendo.
O simplemente copiar y estudiar el ejemplo.
Cualquier persona que tenga este problema no se ha dado cuenta de nada (suponiendo que usted tenga este problema y esté usando div), cualquier cosa entre las etiquetas div se considera (para fines de comprensión) un conjunto completo, lo que significa que en esa división están todas las cosas que desea. significa (las computadoras hacen lo que se les dice, no lo que usted quiere que hagan) así que (por ejemplo) para establecer la alineación del texto en el centro necesita ese espacio de líneas completas y (en última instancia) si tenía un borde, Bordearía todo el espacio que utilizara. Si entiendes esto, sigue leyendo, si no es así, no puedes ayudarte.
Entonces, ahora que entendemos lo que sucede, ¿cómo lo arreglamos? Bueno, necesitamos una parte para centrarla, la otra para colorearla. En mi ejemplo utilicé un div para centrarlo y extenderlo al color. ¿Necesitaba el div? Estoy seguro de que no lo hice. Podría haber logrado lo mismo usando p para centrar (o podría deshacerme de p y simplemente usar div). La razón por la que hice esto fue para mantenerlo organizado.
En realidad, solo porque no me di cuenta hasta que lo pensé, pero no tenía ganas de arreglarlo.
Espero que esto haya respondido a tu pregunta. Te tomé 4 años por una respuesta, pero yo, 30 minutos para averiguarlo (y he estado estudiando CSS por unos días).
El ejemplo:
<div class=''container''>
<div class="text">
text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
</div>
<div class="holder">
<p><span>text here</span></p>
</div>
<div>
text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
</div>
</div>
Entonces css se vería como:
.container {
width: 500px;
height: 500px;
}
.text {
font-size: 20px;
}
.holder {
text-align: center;
}
span {
background-color: blue;
border: 1px solid black;
}
Aviso: configuro el contenedor con el ancho y la altura establecidos porque estaba trabajando en un proyecto al mismo tiempo y para simular una pantalla completa con texto.
También tenga en cuenta que lo he hecho para que el texto tenga un color de fondo separado con un borde. Hice esto para mostrar que sus medidas son independientes y se vuelven a escalar cuando es necesario.
De nada, también creo que la gente no entendió tu pregunta. Espero haberlo hecho.
Los elementos DIV están a nivel de bloque por defecto, lo que significa que obtienen automáticamente el 100% de ancho. Para cambiar eso, usa este CSS ...
.centerBox {
display:inline-block;
text-align:center;
}
<div class="centerBox">
Some text
</div>
EDITAR : Se actualizó para usar una clase CSS en lugar de un atributo en línea y se cambió "bloque" a "bloque en línea"
No lo sé, las soluciones aquí parecen parcialmente correctas, pero en realidad no funcionan. Basado en la respuesta de Josh Stodola, aquí hay una solución de navegador cruzada probada en Firefox, Safari, Chrome e IE 7, 8 y 9
CSS:
body {
text-align: center;
}
#centered-div {
text-align: left;
background: #eee;
display: inline-block;
/* IE7 bs - enables inline-block for div-elements*/
*display: inline;
zoom: 1;
}
Margen:
<div id="centered-div">
Cum sociis natoque penatibus et magnis dis<br />
parturient montes, nascetur ridiculus mus.
</div>
Para agregar compatibilidad con IE6 (suspiro), agregue _height: [yourvalue] a la div. Sí, con un guión bajo.
Pruébelo usted mismo en JSFiddle: http://jsfiddle.net/atp4B/2/
Recomiendo flexbox ! Vea lo que es posible en este sitio web, resuelto por flexbox .
Es bastante nuevo, pero funciona en todos los principales navegadores modernos (IE10 usa prefijo -ms- , IE11 +, Firefox 31+, Chrome 31+, Safari 7+, ...) - vea este gráfico .
Básicamente, el centrado vertical y horizontal, completo con el dimensionamiento dinámico, se puede lograr en 4 afirmaciones:
parent {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
Asegúrese de que este padre en realidad es 100% de altura. Es posible que también debas configurar el body y el html a 100% de altura.
Mi implementación de esto se puede ver en mi propio sitio web personal, http://pgmann.cf .
HTML
<div class="outerdiv">
<div class="innerdiv">
++++TEXT+++
</div>
</div>
CSS
.outerdiv{
text-align: center;
}
.innerdiv{
display: inline-block;
}
<style>
p.one
{
border-style:solid;
border-width:2px;
border-color:red;
display:inline-block;
}
</style>
<p class="one">some text</p>
<style type="text/css">
/* online this CSS property is needed */
p.block {
text-align: center;
}
/* this is optional */
p.block cite {
border: solid 1px Red;
padding: 5px;
}
</style>
<p>Some text above</p>
<p class="block"><cite>some text</cite></p>
<p>Some text below</p>
Sugerencia : no utilice DIV para bloques de texto (para SEO y para mejores propósitos semánticos)