html - texto - Alinear un div al centro

centrar texto horizontalmente css

Question

Quiero hacer flotar un div al centro. ¿Es posible? text-align: center no funciona en IE.

Answer 1

La técnica habitual para esto es el margin:auto

Sin embargo, el IE antiguo no lo asimila por lo que generalmente se agrega text-align: center a un elemento que contiene exterior. No pensarías que funcionaría, pero los mismos IE que ignoran auto también aplican incorrectamente el centro de alineación de texto para bloquear elementos internos de nivel para que las cosas funcionen.

Y esto en realidad no hace un flotador real.

Answer 2

Esto funcionó para mí ..

div.className {
display: inline-block;
margin: auto;
}

Answer 3

Esto funcionó para mí.

Incluí una lista desordenada en mi página dos veces. Una clase div = "menu" id = "vertical", la otra a centrarse fue div class = "menu" id = "horizontal". Como la lista se dejó flotar a la izquierda, necesitaba un div interno para centrarla. Vea abajo.

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }

Answer 4

Esto podría ayudarte ...: D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

Answer 5

Esto siempre me ha funcionado.

Siempre que establezca un ancho fijo para su DIV y el DOCTYPE adecuado, intente esto

div {        
  margin-left:auto;
  margin-right:auto;
}

Espero que esto ayude.

Answer 6

Intente esto, me ayudó: envuelva el div en etiquetas, el problema es que también centrará el contenido del div (si no se codifica de otra manera). Espero que ayude :)

Answer 7

La siguiente solución funcionó para mí.

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

Answer 8

No hay flotador al centro per se. Si quieres centrar un elemento de bloque dentro de otro haz esto:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

con:

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

Ahora eso no hará que el texto se ajuste a su alrededor (como lo haría con un flotador a la izquierda o a la derecha) pero como dije, no hay un centro flotante.

Answer 9

No, no lo es.

Puede tener una burbuja de contenido hacia la derecha de un elemento ( float: left ) o hacia la izquierda de un elemento ( float: right ), no hay ninguna disposición para tener una burbuja de contenido en ambos lados.

Answer 10

Uno de mis sitios web incluye un div cuyo tamaño es variable y usted no lo sabrá de antemano. es un div exterior con 2 div anidados, el div externo tiene el mismo ancho que el primer div anidado, que es el contenido, y el segundo div anidado justo debajo del contenido es el título, que debe estar centrado. Debido a que no se conoce el ancho, uso jQuery para ajustar en consecuencia.

así que mi html es este

<div id=''outer-container''>
<div id=''inner-container''></div>
<div id=''captions''></div>
</div>

y luego centro los subtítulos en jQuery como este

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

Answer 11

Usa divs "espaciadores" para rodear el div que quieres centrar. Funciona mejor con un diseño fluido. Asegúrate de darles la altura a los espaciadores, de lo contrario no funcionarán.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

Answer 12

esto funciona muy bien

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

Esto cambia de tamaño muy bien con diseños adaptativos también ..

El ejemplo de CSS sería:

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}

Answer 13

los divs flotantes al centro "funcionan" con la combinación de visualización: bloque en línea y texto alineado: centro.

Intente cambiar el ancho del div exterior cambiando el tamaño de la ventana de este jsfiddle

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

y el css:

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}

Answer 14

<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

Flote la división en segundo plano hasta el ancho máximo, establezca una división en el interior que no sea transparente y céntrela con el margen automático.