Получить центр выравнивания контента

Question

Я пытаюсь построить вид карты профиля и использую для этого загрузчик.

я строю два элемента div с классом col-lg-3, а другой - с col-lg-9. проблема в том, что содержимое внутри col-lg-9 не выровнено по центру. у него больше места на правой стороне, как на левой стороне, и я стараюсь почти все, чтобы получить их в центре. отключены поля и отступы не работают.

col-lg-9 находится внутри ряда и нормального контейнера. а внутри col-lg-9 - содержимое. у меня есть пример при начальной загрузке, если вы пометите контейнер, вы увидите, что содержимое карты класса занимает больше места.

вот HTML-код этого

            <div class="col-lg-9" style="min-height: 100px; background-color: #333">
            <div class="container">
                <div class="card">
                    <div class="model-image">
                        <img src="img/elliot.jpg">
                    </div>
                    <div class="card-content">
                        <a class="card-header">Team Fu</a>
                     <div class="meta">
                        <span class="date">Create in Sep 2014</span>
                    </div>
                </div>
                    <div class="card-footer">
                        <a href="#">ds</a>
                    </div>
                </div>
            </div>
        </div>

Я загружаюсь так, чтобы вы могли видеть весь сайт. для лучшего понимания демо

Answer 1

Если вы добавите дополнительный контейнер для всех div.card, вы получите его по центру:

<div class="container text-center"> 
 <div class="cards-container" style="display:inline-block; box-sizing:border-box;">

   <!-- here all your .card divs -->

  </div>
</div>

Вы можете добавить css-контейнер в файл css.

Answer 2

При использовании начальной загрузки просто добавьте класс text-center к вашему div, и он будет центрировать ваши элементы и все дочерние элементы.

И я бы предложил использовать встроенный CSS, а не помещать ваш CSS во внешнюю таблицу стилей. Это будет намного легче поддерживать в будущем.

Answer 3

<div class="card-content text-center">
    <a class="card-header">Team Fu</a>
    <div class="meta">
    <span class="date">Create in Sep 2014</span>
</div>