Non può ottenere CSS Elementi centrato

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

  •  20-09-2019
  •  | 
  •  

Domanda

Non riesco a ottenere il mio sito per essere centrata per la vita di me con i CSS. Ho provato tutti i soliti metodi suggeriti giro per il web, tra cui: 

body {
    text-align: center;
}
#container {
    width: 770px;
    margin: 0 auto;
    text-align: left;
}

Quindi, utilizzando 

<div id="container>
<!-- Centered Content Goes here-->
</div>

Ma è solo non andrà al centro. Rimane sul lato sinistro della pagina.

Un esempio di CSS per l'elemento che voglio essere centrato è questa: 

#topHeader
{
    background:url(images/top_header.jpg);
    position:absolute;
    width: 695px;
    height: 242px;
    top: 0px;
    left: 0px;
}

Quindi, il mio HTML sarebbe simile a questa: 

<div id="container>
<div id="topHeader></div>
<!-- All other elements go here as well-->
</div>

Ma, come ho detto prima, l'elemento resta fermo. Grazie! Eric

È stato utile?

Soluzione

Il problema principale è il posizionamento assoluto del vostro elemento #topHeader. Perché hai assolutamente posizionata con top: 0px; left: 0px;, che è esattamente dove sta andando per essere posizionato -. In alto a sinistra della pagina

Iniziare rimuovendo il posizionamento assoluto dall'elemento #topHeader.

Altri suggerimenti

Prova con questo punto morto

Prova ad aggiungere questo alla parte superiore del vostro file CSS: 

// Wipes out any preexisting padding and margin.
html, body {
    padding: 0;
    margin: 0;
}

Quindi aggiungere un position: relative; direttiva per la classe che si desidera centrato. In realtà, prova ad aggiungere alla html, proprio corpo in modo che tutte le classi utilizzano posizione relativa. Potrebbe essere che hai position: absolute; fisso che unisce poi col sinistro: 0px; per forzare l'intestazione contiene di ignorare il margin: 0 auto; e rimanere sulla sinistra della pagina.

Si sta ponendo l'intestazione assolutamente così è stato compensato dal blocco (vale a dire il corpo) che contiene, non è l'elemento principale. Quello che vuoi è posizionamento relativo.

  

assoluto

     

La posizione della scatola (e possibilmente dimensione) è specificata con la 'superiore',   'Giusto', 'bottom', e 'sinistra'   proprietà. Queste proprietà specificano   offset rispetto alla scatola del   blocco contenitore. Assolutamente   scatole posizionate sono presi dal   flusso normale. Questo significa che non hanno   impatto sul layout di seguito   fratelli. Inoltre, anche se assolutamente   scatole posizionate hanno margini, fanno   non collassare con altri margini.

     

- 9.3.1 La scelta di un sistema di posizionamento: la proprietà 'position'

Absolute: 

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:absolute;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

relativa: 

<html>
    <head>
        <style type="text/css">
            body {
                text-align: center;
            }
            #container {
                color:blue;
                border:1px solid blue;

                width: 770px;
                margin: 0 auto;
                text-align: left;
            }
            #topHeader
            {
                color:red;
                border:1px solid red;

                position:relative;
                width: 695px;
                height: 242px;
                top: 0px;
                left: 0px;
            }       
        </style>
    </head>
    <body>
        outside
        <div id="container">
            inside
            <div id="topHeader">deep inside</div>
            <!-- All other elements go here as well-->
        </div>
    </body>
</html>

Una cosa da controllare quando si cerca tutti questi metodi di centratura è quello di assicurarsi che il doctype è corretto per il metodo che viene utilizzato.

Spero che questo aiuti per voi.

Per quanto ne so, semplicemente non funziona. centri text-align testo o contenuto in riga, non bloccare gli elementi.

Modifica D'altra parte di collegamento del Disintegrator ha un senso. Purtroppo, solo per i blocchi fissi di dimensioni.

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