Come faccio a centrare qualcosa se non so in anticipo ciò che la larghezza è?

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

  •  12-09-2019
  •  | 
  •  

Domanda

Sto cercando di centrare un tag di paragrafo con un testo in essa all'interno di un div, ma io non riesco a centrarlo con margin: 0 auto senza dover specificare una larghezza fissa per il paragrafo. Non voglio specificare una larghezza fissa, perché avrò testo dinamico che entra nel tag di paragrafo e sarà sempre una larghezza diversa sulla base di quanto il testo sia.

Qualcuno sa come posso centrare il tag di paragrafo all'interno del div senza dover specificare una larghezza fissa per il paragrafo o senza usare le tabelle?

È stato utile?

Soluzione

Ecco come farlo utilizzando un foglio di stile.

foglio di stile: 

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTML: 

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Altri suggerimenti

Oltre a "text-align" proprietà

per elementi all'interno elementi di blocco, come div centraggio

uso css come 

 margin:auto

qualcosa di simile a ciò che viene postato qui sotto

Quando verticalmente-centratura, la sua migliore per utilizzare le tabelle (questo nella maggior parte dei casi è l'unica soluzione compatibile cross-browser)

è possibile utilizzare 

 "text-align:center"  

 "vertical-align:middle"

Credo che il metodo migliore è quello di contenere l'elemento in un elemento a livello di blocco e fare: 

.innerElement {margin:0 auto}

Dato che sono entrambi gli elementi a livello di blocco che non hanno il parametro galleggiante, dovrebbe funzionare grande!

qui una bella soluzione per centrare un div con no larghezza .

è tableless e sta lavorando in qualsiasi browser!

Prova questo usando CSS in linea: 

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

O utilizzando solo HTML 

<p align="center">Lorem ipsum dolor sit amet</p>

se il div è impostare la larghezza tutto ciò che serve è

.myDiv {text-align: center; }

Anche ascoltare il commento di Garry. in nessun caso utilizzare CSS in linea.

Anche un altro fix sporco per questo nel caso in cui si dispone di altre cose nel div dal centro:

è sempre possibile:

$ ( 'youParagraph o .otherContent ') avvolgere ('');.

Ovviamente non praticare questo se si lavora all'interno di una grande squadra e separazione degli interessi è un problema.

Spero che questo ha aiutato.

Eh, margini auto necessario impostare larghezza dal da elemento di blocco predefinito, ad esempio

si espanderebbe su tutta altezza disponibile.

Se non si sta sostenendo IE <8 si può solo impostare {display: table; margin: 0 auto; }

In caso contrario, se il vostro elemento è circondata da elementi a livello di blocco, si potrebbe fare p {display: inline-block; } P {display: inline; } Html> / ** / corpo p {display: inline-block; } (Ultime due regole sono per IE e il ripristino Fix IE per i browser sane) dopo di che, applicare {text-align: center; } Sul contenitore.

Come qualcuno ha detto già, vedi http://haslayout.net/css-tuts/Horizontal -Centering per maggiori informazioni.

Cheers!     Zoffix Znet

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top