Div no centrado

Tengo un muy básico % del ancho de la serie de divs. Estoy tratando de centrar el elemento en el <div class="media-top-center">.

Aquí está el código HTML y CSS código;

HTML

<div class="media-top-wrapper">
  <div class="media-top-left">
    Posted by <a href="<%= uploader.profilePath %>"><%= uploader.name %></a> from <a href="<%= attribution %>"><%= attribution_name %></a>
  </div>
  <div class="media-top-center">
    <div class="top-center media-card-avatar-round" style="background-image:url('<%= uploader.avatar %>');"></div>
  </div>
  <div class="media-top-right">
    <div class="heart"></div>
    <div class="repost"></div>
    <div class="flag"></div>
  </div>
</div>

CSS

.media-top-wrapper{
  max-width: 100%;
  margin: 0 auto;
}

.card-media-top-wrapper{
  max-width: 100%;
  margin: 0 auto;
}

.media-top-left,
.media-top-right{
  width: 36%;
  float: left;
  box-sizing: border-box;
}

.media-top-center{
  width: 28%;
  float: left;
  box-sizing: border-box;
}

.card-media-top-left,
.card-media-top-right{
  width: 50%;
  float: left;
  padding: 0 0.5em 0.25em 0.5em;
  box-sizing: border-box;
}

.media-top-left{
  padding-top: 1em;
  text-align: left;
}
.media-top-center{
  text-align: center;
}
.media-top-right{
  text-align: right;
}

.top-center{
  margin: 0 auto !important;
}

He centrado cosas antes con margin: 0 autobastante básico. pero en este caso, no está funcionando. Por favor, ayudar.

OriginalEl autor Tithos | 2014-01-02

3 Kommentare

  1. 3

    Porque .top-center es un elemento div que tiene por defecto display:block entonces es de 100% de ancho y margin: auto no tiene ningún efecto. Pruebe a cambiar la pantalla para ajustar con el contenido y en el centro:

    .top-center {
      display:inline-block;
    }

    Que funciona porque tiene en el padre text-align:center

    OriginalEl autor DaniP

  2. 1

    Usted no puede centro de divs con margin: 0 auto;, si no ha ajustado el ancho del elemento. Añadir anchura a .top-center para hacer que funcione.

    .top-center{
      margin: 0 auto !important;
      width: 80%; /* add wanted width */
    }

    OriginalEl autor Karri Rasinmäki

  3. 1

    Soy un GRAN fan de display: flex;. Creo que debes de ver en que. Aquí es mi favorito para el centro de las cosas, y la manera más fácil es con display flex.

    https://css-tricks.com/centering-css-complete-guide/

    Que incluso lleva a través de un diagrama de flujo como la experiencia para obtener lo que desea.

    Así que usted puede hacer algo como esto dependiendo de lo que sus criterios son, exactamente:

    .media-top-wrapper {
        display: flex;
        justify-content: space-around;
    }

    OriginalEl autor Casey

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea