Contenuto centro CSS all'interno div

Question

Ho bisogno di centrare il contenuto html all'interno di una classe div = "partner" (top div con 2 immagini). Come si può vedere dall'immagine qui sotto (che galleggia a sinistra al posto del centro del div):

Questo è il mio codice html:

<div id="partners"> 
    <div class="wrap clearfix"> 
     <h2>Partnertnerzy serwisu:</h2> 
     <ul> 
      <li><a href="http://www.dilbert.com/"><img width="56" height="16" alt="Parnter bar wika" src="/as/partners/wika.png"></a></li>  
      <li><a href="http://www.youtube.com><img width="65" height="15" alt="Parnter bar siemens" src="/as/partners/siemens.png"></a></li>  
     </ul> 
     <a class="linkClose" href="/firmy?clbp=1">Zamknij </a> 
    </div> 
</div> 

Image:

CSS:

#partners, #top { 
    position: relative; 
    z-index: 100; 
} 
#partners { 
    margin: 12px 0 3px; 
    text-align: center; 
} 
.clearfix:after, .row:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
#partners .wrap { 
    width: 655px; 
} 
.wrap { 
    margin: 0 auto; 
    position: relative; 
    width: 990px; 
} 
#partners h2 { 
    color: #A6A5A5; 
    float: left; 
    font-weight: normal; 
    margin: 2px 15px 0 0; 
} 
#partners ul { 
    float: left; 
} 
ul { 
    list-style-position: outside; 
    list-style-type: none; 
} 

Answer 1

A centra a div, imposta la sua larghezza su un valore e aggiungi margine: auto.

#partners .wrap { 
    width: 655px; 
    margin: auto; 
} 

MODIFICA, si desidera centrare il contenuto del div, non il div stesso. È necessario modificare la proprietà di visualizzazione di h2, ul e li a inline e rimuovere float: left.

#partners li, ul, h2 { 
    display: inline; 
    float: none; 
} 

Poi, saranno spiegate come normali elementi di testo, e allineati in base alle proprietà text-align del loro contenitore, che è ciò che si desidera.

Answer 2

Il problema è che è stata assegnata una larghezza fissa al DIV .wrap. Il DIV stesso è centrato (lo puoi vedere quando aggiungi un bordo ad esso) ma il DIV è troppo largo. In altre parole il contenuto non riempie tutta la larghezza del DIV.

Per risolvere il problema è necessario assicurarsi che il DIV .wrap sia ampio solo quanto contenuto.

Per raggiungere questo è necessario rimuovere il galleggiante negli elementi di contenuto e impostare la proprietà display degli elementi livelli di blocco per inline:

#partners .wrap { 
display: inline; 
} 

.wrap { margin: 0 auto; position: relative;} 

#partners h2 { 
color: #A6A5A5; 
font-weight: normal; 
margin: 2px 15px 0 0; 
display: inline; 
} 

#partners ul { 
display: inline; 
} 

#partners li {display: inline} 

ul { list-style-position: outside; list-style-type: none; } 

Answer 3

fanno in questo modo:

child{ 
    position:absolute; 
    margin: auto; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
} 

Answer 4

Ci sono molti modi per centrare qualsiasi elemento. Ho elencato alcuni

1. Impostare la larghezza su un valore e aggiungere margine: 0 auto.

.partners { 
 
    width: 80%; 
 
    margin: 0 auto; 
 
}

---

2. Spalato nel layout di colonna 3

.partners { 
 
    width: 80%; 
 
    margin-left: 10%; 
 
}

---

3. Usa layout di bootstrap

<div class="row"> 
 
    <div class="col-sm-4"></div> 
 
    <div class="col-sm-4">Your Content/Image here</div> 
 
</div>

Answer 5

Provare a usare FlexBox. Ad esempio, il codice seguente mostra il CSS per il contenitore div all'interno del quale i contenuti devono essere allineati centrati:

.absolute-center { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 

    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 

    align-items: center; 

}