Contenido del centro CSS dentro de div

Question

Necesito centrar el contenido html dentro de una clase div = "partners" (div superior con 2 imágenes). Como se puede ver en la imagen de abajo (que flota izquierdo en lugar del centro de la div):

Este es mi código 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

Para centrar un div, establecer su ancho a algún valor y agregar margen: automático.

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

EDITAR, desea centrar los contenidos de div, no el div en sí. Debe cambiar la propiedad de visualización de h2, ul y li a inline, y eliminar float: left.

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

Luego, serán nos extienden como elementos de texto normales, y alineados según la propiedad text-align de su contenedor, que es lo que desea.

Answer 2

El problema es que asignó un ancho fijo a su .Vínculo DIV. El DIV en sí está centrado (puedes verlo cuando le agregas un borde) pero el DIV es demasiado ancho. En otras palabras, el contenido no cubre todo el ancho del DIV.

Para resolver el problema, debe asegurarse de que .wrap DIV tiene el mismo ancho que su contenido.

Para lograr que usted tiene que quitar la flota en los elementos de contenido y establezca la propiedad display de los elementos de los niveles de bloque para 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

hacen así:

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

Answer 4

Hay muchas formas de centrar cualquier elemento. Enumeré algunos

1. Establezca su ancho a algún valor y agregue el margen: 0 auto.

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

---

2. Dividir en disposición 3 columna

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

---

3. usa la disposición de arranque

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

Answer 5

Trate de usar FlexBox. Como ejemplo, el siguiente código muestra el CSS para el contenedor div dentro del cual el contenido debe estar alineado al centro:

.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; 

}