Wie positioniere ich ein Div innerhalb eines div?

Question

Ich mag ein div in einem div in der rechten linken Ecke positionieren wie:

und ich möchte wie ein div in einem div in der Mitte positionieren:

Wie kann dies auf einfachste Weise durchgeführt werden? : O

Answer 1

Verwenden Div Box

für die Haupt div

position: absolute

der Rest von divs innen Gebrauch:

position: relative

Check http://www.barelyfitz.com/screencast/html-training/css/positioning/ hit # 4

Answer 2

können Sie meine versuchen Der vorherige Eintrag: https://stackoverflow.com/a/9726717/1146022

Beispiel: http://jsfiddle.net/VsqdW/2/

Answer 3

#div1 { 
    position: relative; 
    top: 0; 
    left: 100%; 
} 

#div2 { 
    width: 100; 
    height: 100; 
    margin: auto auto; 
} 

Answer 4

für die obere linke Ecke verwenden diese:

.ContainingDiv {position: relative;} 
.InsideDiv {position: absolute; top: 0px; right: 0px;} 

für das Zentrum, tun das nächste:

.InsideDivCenter {margin: 0px auto;} 

Answer 5

Top/Rechtes inneres Element:http://jsfiddle.net/ZAKAz/1/

.outer { height:200px; width:200px; position:relative; } 

.inner { position:absolute; top:0; right:0; width:50px; height:50px } 

Centralized innere Element:http://jsfiddle.net/ZAKAz/

.outer { height:200px; width:200px; position:relative; } 

.inner { position:absolute; top:50%; left:50%; 
     margin: -25px 0 0 -25px; width:50px; height:50px } 

Answer 6

try Schwimmers proprety:

.divA 
{ 
float:right; 
} 

http://www.w3schools.com/cssref/pr_class_float.asp

Answer 7

html:

<div class="outside"> 
    <div class="inside top_right"> 
    </div>   
</div> 
<div class="outside"> 
    <div class="inside center"> 
    </div> 
</div>​ 

css:

.outside {position:relative;width:200px;height:200px;border:2px solid black} 
.inside {position:absolute;width:50px;height:50px;border:2px solid blue} 

.top_right {top:0;right:0;} 

.center {top:50%;left:50%;margin:-25px 0 0 -25px} 

der Behälter ein position:relative hat, um diese Anzeige zu machen, wo es auf der Seite vorgesehen ist, und lassen Sie die position:absolute als innerhalb der Grenzen des Behälters erwartet arbeiten.

die CSS Mitte gibt setzt die div bei 50% gegenüber den top & left, dann unter Verwendung eines negativen margins die Hälfte width/height der div es in die Mitte zu ziehen.

Ich denke, oben rechts ist so ziemlich selbsterklärend.

Demo: http://jsfiddle.net/JKirchartz/BK7qr/

Answer 8

Ihre erste Frage ist so einfach wie: div.foo {float: right; }

oder du könntest einfach valign = center ... aber die obigen Antworten sind gründlicher, das ist genau die Art, wie ich es zuerst versuchen würde ... zumindest für den, den du in der Mitte des div willst.

ANMERKUNG: valign wurde als veraltet zugunsten des css-Attributs vertical-align deklariert. also müssen Sie es mit vertikaler Ausrichtung tun. Entschuldigung, das habe ich vergessen. Ich bin eine kleine alte Schule aus den Tagen der Tisch Layouts :)