texto - centrar input css

¿Centrar un div automático de ancho?

Question

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í?

Answer 1

¿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/

Answer 2

.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; }

Answer 3

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!

Answer 4

Es posible que desee probar la display:table-cell CSS display:table-cell o display:table

Answer 5

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).

Answer 6

Margen de uso: 0px auto; and display: table; 0px auto; and display: table; Hay un ejemplo: https://jsfiddle.net/da8p4zdr/

Answer 7

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;
}

Answer 8

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>

DEMO http://jsfiddle.net/RXP4F/

Contenido editable MDN

Answer 9

EDITADO:

use la table , podría ser más fácil de diseñar. A continuación, agregue div en el tr