css - style - posizionare un'immagine html




Come centrare l'elemento posizionato in modo assoluto in div? (18)

Devo posizionare un elemento div (con position:absolute; ) al centro della mia finestra. Ma sto avendo problemi a farlo, perché la larghezza è sconosciuta .

Ho provato questo. Ma ha bisogno di essere regolato come la larghezza è reattiva.

.center {
  left: 50%;
  bottom:5px;
}

Qualche idea?


Soluzione reattiva

Ecco una buona soluzione per la progettazione reattiva o dimensioni sconosciute in generale se non è necessario supportare IE8 e inferiore.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}
<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Ecco un JS Fiddle

L'indizio è, quello left: 50% è relativo al genitore mentre la trasformazione translate è relativa agli elementi larghezza / altezza.

In questo modo hai un elemento perfettamente centrato, con una larghezza flessibile sia sul bambino che sul genitore. Bonus: funziona anche se il bambino è più grande del genitore.

Puoi anche centrarlo verticalmente con questo (e ancora, larghezza e altezza di genitore e figlio possono essere totalmente flessibili (e / o sconosciuti)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Tieni presente che potresti aver bisogno di transform fornitore con prefisso. Ad esempio -webkit-transform: translate(-50%,-50%);


È possibile posizionare l'immagine in un div e aggiungere un ID div e il CSS per quel div avere un text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

Capisco che questa domanda abbia già alcune risposte, ma non ho mai trovato una soluzione che possa funzionare in quasi tutte le classi che abbia anche senso ed è elegante, quindi ecco la mia versione dopo aver modificato un gruppo:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}
<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Ciò che dice è darmi un top: 50% e una left: 50% , quindi trasformare (creare spazio) sia sull'asse X / Y sul valore -50% , in un certo senso "creare uno spazio speculare".

Come tale, questo crea uno spazio uguale su tutti i 4 punti di un div, che è sempre una scatola (ha 4 lati).

Questo sarà:

  1. Lavora senza conoscere l'altezza / larghezza del genitore.
  2. Lavora in modo reattivo.
  3. Lavora sull'asse X o Y. O entrambi, come nel mio esempio.
  4. Non riesco a trovare una situazione in cui non funzioni.

Cerca di non usare il lato oscuro del CSS. Evitare l'uso di valori negativi per i margini. So che a volte sei costretto a fare cose orribili come un margin-left: -450px , ma probabilmente potresti fare qualcosa di simile right: 450px . È solo il mio modo di lavorare.


Ecco un utile plugin jQuery per farlo. Trovato here . Non penso sia possibile solo con i CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

Funziona su qualsiasi larghezza casuale sconosciuta dell'elemento posizionato assoluto che si desidera avere al centro dell'elemento contenitore.

Demo

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Questo e altri esempi here


Ho usato una soluzione simile:

#styleName {
    position: absolute;
    margin-left: -"X"px;
}

Dove "X" è la metà della larghezza di un div che voglio mostrare. Funziona bene per me in tutti i browser.


Per quanto ne so, questo è impossibile da ottenere per una larghezza sconosciuta.

Potresti - se questo funziona nel tuo scenario - posizionare assolutamente un elemento invisibile con larghezza e altezza al 100% e avere l'elemento centrato in là usando il margine: automatico e possibilmente allineato in verticale. Altrimenti, avrai bisogno di Javascript per farlo.


Questa soluzione funziona se l'elemento ha width e height

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
<div class="wrapper">
  <div class="content"></div>
</div>


Questo funziona per me:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}
<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>


Questo ha funzionato per me:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

Un approccio semplice che ha funzionato per me per centrare orizzontalmente un blocco di larghezza sconosciuta:

<div id="wrapper">
  <div id="block"></div>
</div>
#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Una proprietà text-align può essere aggiunta al set di regole #block per allineare il suo contenuto indipendentemente dall'allineamento del blocco.

Questo ha funzionato su versioni recenti di Firefox, Chrome, IE, Edge e Safari.


Vorrei aggiungere alla risposta di @ bobince:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

Migliorato: /// questo rende la barra di scorrimento orizzontale non visualizzata con elementi grandi nel div centrato.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

versione sass / compass della Soluzione reattiva sopra:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

Centro assoluto

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Testato su Google Chrome, Firefox e IE8

Spero che questo ti aiuti :)


<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>


#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}






absolute