Alinear Horizontal y Verticalmente

Para ello introduciremos el objeto a centrar en otro con  propiedades display:table, el objeto a centrar tendrá el Display:table-cell.

Sigue el ejemplo

.ExternContainer{
 top: 0px;
 left: 0px;
 width: 100%;
 height: 100%;
 position: absolute;
 display: table;
 }
 .InternContainer{
 display: table-cell;
 text-align: center;
 vertical-align: middle;
 }

Recurso: http://www.w3.org/Style/Examples/007/center-example

Método para centrar Listas Horizontalmente:

HTML:
<div id="menu-outer">
  <div class="table">
    <ul id="horizontal-list">
      <li><a href="#"><img src="images/list-item-1.gif" alt="list item 1" /></a></li>
      <li><a href="#"><img src="images/list-item-2.gif" alt="list item 2" /></a></li>
      <li><a href="#"><img src="images/list-item-3.gif" alt="list item 3" /></a></li>
      <li><a href="#"><img src="images/list-item-4.gif" alt="list item 4" /></a></li>
    </ul>
  </div>
</div>

CSS:

#menu-outer {
    height: 84px;
    background: url(images/bar-bg.jpg) repeat-x;
}

.table {
    display: table;   /* Allow the centering to work */
    margin: 0 auto;
}

ul#horizontal-list {
    min-width: 696px;
    list-style: none;
    padding-top: 20px;
    }
    ul#horizontal-list li {
        display: inline;
    }

Recurso: https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *