texto - centrar input css
¿Centrar un div automático de ancho? (9)
¿Has probado el enfoque que se muestra aquí? http://www.tightcss.com/centering/center_variable_width.htm
básicamente. pon tu contenido dentro de un div flotante pon ese div flotante dentro de otro div flotante
poner a la izquierda: 50%, posición relativa en div exterior poner a la izquierda: -50%, posición relativa en div interior
finalmente, anide todo en una div más con desbordamiento: oculto
.outermost-div{
background-color: blue;
overflow:hidden;
}
.inner-div{
float:left;
left:50%;
background-color: yellow;
position: relative;
}
.centerthisdiv {
position:relative;
left: -50%;
background-color: green;
float:right;
width:auto;
}
aquí está mi demostración jsfiddle: http://jsfiddle.net/wbhyX/1/
Estoy teniendo problemas porque tengo un DIV que quiero centrar y lo que generalmente me han dicho que haga es esto:
width: 700px;
margin-left: auto;
margin-right: auto;
el problema es que esto es así si quieres que el div tenga un ancho fijo. Quiero que el div ajuste su tamaño según el texto en el div, y aún esté centrado. Lo intenté:
width: auto;
margin-left: auto;
margin-right: auto;
pero esto no funcionó. Extiende el div para llenar la pantalla cuando hago esto.
¿Alguien sabe qué hacer aquí?
.outer-container {position: relative; izquierda: 50%; flotador izquierdo; Limpia los dos; margen: 10px 0; text-align: izquierda; }
.inner-container {background: red; posición: relativa; izquierda: -50%; text-align: izquierda; }
Centrar un elemento horizontalmente puede ser un poco extraño, ya que la funcionalidad no es muy intuitiva. Realmente, necesitas jugar con text-align:center; y margin:auto, y deberá saber cuándo usarlo.
Por ejemplo, si quiero centrar el contenido de un elemento (texto sin formato), incluidos los botones y las entradas, puedo usar text-align:center .
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
</div>
Si agregamos otros elementos a nuestro contenedor, esos elementos tendrán su ancho forzado al 100%. Esto nos ayuda a emular que está centrado porque técnicamente, al 100%, ¡está centrado! Tonto, ¿no?
.text-center {
text-align:center;
}
<div class="text-center" style="border:1px dashed blue;padding:6px;" >
My contents are centered! That includes my <input placeholder="inputs" /> and my <button>buttons.</button>
<p style="background-color:orange;width:auto" >Even though my width is explicitly defined as "auto," I still have 100% width! What gives?!</p>
</div>
Sin embargo, si su propiedad de ancho está definida, puede usar el estilo margin: auto para centrarlo dentro del elemento principal.
<div style="margin:auto;border:1px solid black;width:300px;" >
I am centered!
</div>
Debe determinar qué solución es mejor para usted. Desearía poder ayudar más, pero es difícil saber qué solución se adaptará mejor a tus necesidades cuando no hayas proporcionado el código HTML para tu problema.
De cualquier manera, ¡espero que este JSFiddle ayude a aclarar las cosas!
Es posible que desee probar la display:table-cell CSS display:table-cell o display:table
La respuesta de zloctb del 30 de agosto de 13 a las 4:14 en realidad funcionó en principio, pero estaba incompleta. Si desea que el ancho de su elemento sea ''automático'' en función de los contenidos dentro de él Y centrado dentro de su elemento primario PERO con los contenidos dentro del elemento NIÑO alineado a la izquierda, haga lo siguiente (porque realmente es la manera más simple):
.parent {
width: 100%;
text-align: center;
}
.parent div.child {
display: inline-block;
text-align: left;
width: auto;
}
(Obviamente, si solo quisiera que todo estuviera estrictamente centrado, no necesitaría el código para el elemento hijo).
Margen de uso: 0px auto; and display: table; 0px auto; and display: table; Hay un ejemplo: https://jsfiddle.net/da8p4zdr/
Prueba esta estructura
<div class="container">
<div class="center_div">
</div>
</div>
.container{
float: left;
left: 50%;
position: relative;
}
.center_div{
position: relative;
left: -50%;
float: left;
}
para el bloque o cuerpo principal - text-align:center ; para la visualización del bloque central display:inline-block ;
.center{display:inline-block;background:red}
body{text-align:center}
<div class="center">
<p contenteditable="true">write text</p>
</div>
EDITADO:
use la table , podría ser más fácil de diseñar. A continuación, agregue div en el tr