it-swarm.com.de

Richten Sie ein Div auf den Mittelpunkt aus

Ich möchte eine div zur Mitte bewegen. Ist es möglich? text-align: center funktioniert nicht im IE. 

48
Chendur Pandian

Es ist kein Schwimmer zur Zentrierung vorhanden. Wenn Sie ein Blockelement in einem anderen zentrieren möchten, gehen Sie folgendermaßen vor:

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

mit:

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

Nun wird der Text nicht mehr so ​​umbrochen (wie bei einem Float nach links oder rechts), aber wie gesagt: Es gibt kein Float-Zentrum.

73
cletus

Das hat immer für mich funktioniert.

Wenn Sie eine feste Breite für Ihr DIV und den richtigen DOCTYPE festgelegt haben, versuchen Sie dies

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

Hoffe das hilft.

22
user1656346

Die übliche Technik dafür ist margin:auto

Alte IE hat dies jedoch nicht. Daher fügt man normalerweise text-align: center zu einem äußeren Element hinzu. Sie würden nicht glauben, dass das funktionieren würde, aber die gleichen IEs, die auto ignorieren, wenden die Textausrichtungsmitte falsch an, um innere Elemente der Ebene zu blockieren.

Und das macht eigentlich keinen echten Schwimmer.

11
DigitalRoss

Folgende Lösung hat bei mir funktioniert.

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

gleitende divs zu center "funktioniert" mit der Kombination aus display: inline-block und text-align: center.

Versuchen Sie, die Breite des äußeren div zu ändern, indem Sie das Fenster dieses jsfiddle ändern.

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

und die 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;
}
5
T. Philipp

Bei einer meiner Websites handelt es sich um ein Div, dessen Größe variabel ist. Sie werden es nicht im Voraus wissen. es ist ein äußeres div mit 2 verschachtelten divs, das äußere div hat die gleiche Breite wie das erste verschachtelte div, also den Inhalt, und das zweite verschachtelte div rechts unterhalb des Inhalts ist die Bildunterschrift, die zentriert werden muss. Da die Breite nicht bekannt ist, verwende ich jQuery, um sie entsprechend anzupassen.

also meine html ist dies

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

und dann zentriere ich die Bildunterschriften in jQuery so

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

Verwenden Sie "spacer" divs, um das div zu umgeben, das Sie zentrieren möchten. Funktioniert am besten mit einem fließenden Design. Geben Sie den Abstandhaltern unbedingt die Höhe an, sonst funktionieren sie nicht.

<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>
3
Huuu

Das hat für mich funktioniert ..

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

das könnte dir helfen ..: 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>

1
adarsh mohan
<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>

Verschieben Sie das div im Hintergrund auf die maximale Breite, stellen Sie ein div ein, das nicht transparent ist, und zentrieren Sie es mit dem Randbereich auto.

0
prospector

Nein, ist es nicht.

Sie können entweder eine Inhaltsblase auf der rechten Seite eines Elements (float: left) oder auf der linken Seite eines Elements (float: right) haben. Es ist nicht vorgesehen, dass die Inhalte auf beiden Seiten aufgeblasen werden.

0
Quentin

das funktioniert gut

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

Dies passt auch mit adaptiven Layouts gut an.

CSS-Beispiel wäre:

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

Das hat bei mir funktioniert. 

Ich habe zweimal eine ungeordnete Liste auf meiner Seite eingefügt. Eine div-Klasse = "menu" id = "vertical" die andere zu zentrierende war div class = "menu" id = "horizontal". Da die Liste nach links verschoben wurde, brauchte ich ein inneres Div, um sie zu zentrieren. Siehe unten.

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