moet help CSS sentreer met absolute posisionering

StackOverflow https://stackoverflow.com/questions/1034449

  •  06-07-2019
  •  | 
  •  

Vra

Ek het nog nooit heeltemal tevrede met my verskeie oplossings vir sentreer inhoud in 'n web bladsy is. die <center> tag is afgekeur terug in die middel van die 18de eeu, maar ek sou versuim om 'n redelike alternatief sien. Spesifiek wat ek wil hê, is om 'n ouer DIV wat gesentreer het, maar teen wie boonste linkerhoek Ek kan dinge "absoluut" gestel.

Is daar 'n manier om dit te bewerkstellig sonder die gebruik van window.onresize javascript dat alles heroorweeg? Dit lyk soos 'n redelik reguit vorentoe idee ... Ek wil dinge absoluut geposisioneer, ek wil net die 0,0 koördineer met betrekking tot iets anders as die boonste linker hoek van die venster om te wees.

Op die oomblik is, wat ek doen is ingestel 'n div om die inhoud daarvan sentrum en dan noodle rond met relatiewe posisionering, maar dit is baie taai, want relatiewe voorwerpe hou stoot mekaar rondom 'n manier dat ek dit heeltemal wil nie.

Enige en alle gedagtes oor hierdie hoog op prys gestel.

Was dit nuttig?

Oplossing

Is dit wat jy is op soek na? 

<div style=" position: absolute;
             display: inline-block;
             top: 20%;
             bottom: 20%;
             right: 20%;
             left: 20%;
             background-color: #434154;
             text-align: center;">
    <div style="display: inline-block;
                height: 100%;
                vertical-align: middle;"></div>
    <div style="position: relative;
                color: #FFFFFF;
                background-color: #546354;
                display: inline-block;
                vertical-align: middle;">
               THIS IS CENTERED WITHOUT SCRIPTING :D
    </div>
</div>

Ander wenke

body { text-align: center; }
#wrapper { width: 960px; margin: 0 auto; text-align: left; position: relative; }
#wrapper .child { position: absolute; left: 0; top: 0; }

Just voorbeeld kode, maar enige .child element sal wees op 0,0 van die omslag

Enige absoluut geposisioneer element sal absoluut posisie om dit naaste posisie-relatiewe ouer. As 'n element 'n ouer met posisie relatief nie, dit maak gebruik van net die dokument. Hieronder is 'n voorbeeld sonder klasse ( 'n bietjie kleur en breedte style bygevoeg vir duidelikheid). 

<html>
    <body style="text-align: center;">
        <div style="position: relative; width: 100px; height: 100px; margin: 0 auto; background: red;">
            <div style="position: absolute; left: 0; top: 0;">
                This will absolutely position relative to the container div.
            </div>
        </div>
        <div style="position: absolute; left: 0; top: 0; width: 100px; height: 100px; background: blue;">
            This will absolutely position relative to the document
        </div>
    </body>
</html>

As jy vas is met position: absolute; dan stel die div wat jy wil dinge geposisioneer teen te position: relative; het om dit te maak in die posisie konteks vir enige kind elemente.

Om 'n absoluut geposisioneer div wat jy nodig het om te weet dit is breedte sentrum, gebruik dan die volgende CSS: 

#wrapper {
    width: 800px;
    margin: 0 auto;
    position: relative; /* creates a positioning context for child elements */
}

#child {
    position: absolute;
    width: 400px;
    left: 50%;
    margin-left: -200px;
}

En die HTML: 

<div id="wrapper">
    <div id="child">
        ....
    </div>
</div>

Jy kan die wydte en linkerkantlyn af te stel as jy dit nodig het (die negatiewe linkerkantlyn moet die helfte van die breedte van die div jy sentreer bv. #child. Wees

As ander mense het genoem behulp margin: 0 auto; op 'n element met 'n breedte ingestel op dit sal dit sentreer.

Ek nice manier om dinge sentrum is om die "marge: motor" gebruik css tag. Dit werk in VF en Safari. Gee net vir 'n div sommige breedte en 'n marge motor, en indien die ouer is 100% breedte, dan is dit div sal sentrum in lyn self.

Vir hierdie om te werk in IE, moet jy die teks-align gebruik:. Sentrum kenmerk op die ouer en dan text-align links op die werklike gesentreer div

AFAIK, daar is geen manier om die absolute koördinate van 0,0 verander na 'n ander arbit punt. Relatiewe is die pad om te gaan.

miskien het ek nie die taak verstaan, maar ek dink jy kan gebruik 

margin: 0 auto;

vir sentrering jou divs

Gebruik relatiewe posisionering op die ouer en gee dat dieselfde element die eiendom: 

margin: 0 auto;

Die ouer is nou geposisioneer en jy moet in staat wees om elemente stel absoluut daarin.

Voorbeeld: 

div#page{
  position:relative;
  width:400px;
  margin:0 auto;
}

div#page #absoluteExample{
  position:absolute;
  top:18px;
  left:100px;
}

Die maklikste manier: 

#element {

position: absolute; /*Absolute Position*/

top: 0; 
left: 0;          /*Set the 4 coordinates to zero*/
bottom: 0; 
right: 0;

margin: auto;      /*Margin to Auto*/

height: 150px;   /*Set the Height and Width*/
width:150px;

background:green; /* Backgroung:optional*/

}

Dit sal dit bring regs by die middel, maak nie saak dit is grootte.

Hoop dit help!

Sien Fiddle: http://jsfiddle.net/kfPC6/

Wil jy nie relatiewe posisionering as 0,0 gaan met betrekking tot 'n div?

te wees

Die text-align: center; eiendom doen wat gebruik word om <center> en dit is veel beter om dit te.

Enigste ding is, dit is 'n bietjie meer ingewikkeld om te gebruik. Sodra jy die hang van dit, sal jy wonder hoekom jy met soveel moeite voor!

Jy moet dit gebruik in samewerking met die eienskappe van ander elemente op die bladsy. Dit is die probleem ontwikkelaars / ontwerpers het met CSS en nuwer HTML tegnologie. Dit gee ons 'n kragtige manier om ons bladsy elemente aan te bied, maar maak dit baie meer kompleks en streng.

Mike Robinson se antwoord los beslis die probleem wat jy hier met en dit is 'n goeie voorbeeld. Maar ...

Ek dink nie enige een antwoord sal jou wys hoe om text-align behoorlik gebruik vir alle gevalle sal jy teëkom, maar probeer soek na hoe posisionering in CSS werk meer in-diepte.

Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top