CSS: blocco centrale, ma allineare il contenuto a sinistra

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

  •  13-09-2019
  •  | 
  •  

Domanda

Voglio un intero blocco di essere centrato nel suo genitore, ma voglio il contenuto del blocco da allineati a sinistra.

Gli esempi servono migliore

In questa pagina:

http: // YAML-online- parser.appspot.com/?yaml=%23+ASCII+Art%0d%0a---+%7c%0d%0a++%5c%2f%2f%7c%7c%5c%2f%7c%7c%0d% 0a ++% 2f% 2f +% 7c% 7c ++% 7c% 7c __% 0d% 0a & type = python

l'arte ASCII deve essere centrata (come appare), ma dovrebbe allinearsi e guardare come "YAML".

O questo:

http: // YAML-online- parser.appspot.com/?yaml=%3f+-+Detroit+Tigers%0d%0a++-+Chicago+cubs%0d%0a%3a%0d%0a++-+2001-07-23%0d%0a%0d%0a % 3F +% 5b + New + York + yankee% 2c% 0d% 0a ++++ Atlanta Braves + +% 5d% 0d% 0a% 3a +% 5b + 2001/07/02% 2c + 2001/8/12% 2c% 0d% 0a ++++ 2001/8/14 +% 5d% 0d% 0a

il messaggio di errore dovrebbe tutti in fila come in una console.

È stato utile?

Soluzione 2

rinnovo di lavoro la risposta dall'altra domanda: Come per centrare orizzontalmente un elemento flottante di una larghezza variabile?

Supponendo che l'elemento che viene galleggiava e sarà centrato è un div con un id = "content" ... 

<body>
<div id="wrap">
   <div id="content">
   This will be centered
   </div>
</div>
</body>

E applicare la seguente CSS 

#wrap {
    float: left;
    position: relative;
    left: 50%;
}

#content {
    float: left;
    position: relative;
    left: -50%;
}

Ecco un buon riferimento per quanto riguarda che http: // dev.opera.com/articles/view/35-floats-and-clearing/#centeringfloats

Altri suggerimenti

In primo luogo, creare un div genitore che centra il suo contenuto bambino con text-align: center. Successivamente, creare un div bambino che utilizza display: inline-block di adattarsi alla larghezza dei suoi figli e text-align: left per rendere il contenuto che detiene adeguamento alla sinistra, se lo desideri. 

<div style="text-align: center;">
    <div style="display: inline-block; text-align: left;">
        Centered<br />
        Content<br />
        That<br />
        Is<br />
        Left<br />
        Aligned
    </div>
</div>

Se ho capito bene, è necessario utilizzare per centrare un contenitore (o blocco) 

margin-left: auto;
margin-right: auto;

e a sinistra allineare il suo contenuto: 

text-align: left;

In genere si dovrebbe usare margin: 0 auto sul div come detto nelle altre risposte, ma dovrete specificare una larghezza per il div. Se non si desidera specificare una larghezza si potrebbe o (questo è a seconda di ciò che si sta cercando di fare) uso margini, qualcosa come margin: 0 200px; , Questo dovrebbe rendere i contenuti sembra come se fosse centrato, si potrebbe anche vedere la risposta di Leyu a la mia domanda 

<div>
    <div style="text-align: left; width: 400px; border: 1px solid black; margin: 0 auto;">
         <pre>
Hello
Testing
Beep
         </pre>
    </div>
</div>

E 'questo quello che stai cercando? Flexbox ... 

.container{
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
}
.inside{
  height:100px;
  width:100px;
  background:gray;
  border:1px solid;
}
<section class="container">
  <section class="inside">
    A
  </section>
  <section class="inside">
    B
  </section>
  <section class="inside">
    C
  </section>
</section>

Ho trovato il modo più semplice per centrare e testo a sinistra-align all'interno di un contenitore è la seguente:

HTML: 

<div>
  <p>Some interesting text.</p>
</div>

CSS: 

P {
  width: 50%; //or whatever looks best
  margin: auto; //top and bottom margin can be added for aesthetic effect
}

Spero che questo è ciò che stavate cercando, come mi c'è voluto un po 'di ricerca solo capire questa soluzione piuttosto semplice.

Questo funziona 

<div style="display:inline-block;margin:10px auto;">
    <ul style="list-style-type:none;">
        <li style="text-align:left;"><span class="red">❶</span> YouTube AutoComplete Keyword Scraper software <em>root keyword text box</em>.</li>
        <li style="text-align:left;"><span class="red">❷</span> YouTube.com website <em>video search text box</em>.</li>
        <li style="text-align:left;"><span class="red">❸</span> YouTube AutoComplete Keyword Scraper software <em>scraped keywords listbox</em>.</li>
        <li style="text-align:left;"><span class="red">❹</span> YouTube AutoComplete Keyword Scraper software <em>right click context menu</em>.</li>
    </ul>
</div>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top