css/html - выравнивающий по центру текст в шестнадцатеричной сетке не хочет работать

Question

Название говорит обо всем. У меня есть сетка изображений (с использованием начальной загрузки), над каждым из них есть заголовок, но я не могу заставить его вести себя так, как будто он выровнен по центру. У меня были проблемы с воссозданием его в jsfiddle, но я сделал изображение для объяснения (см. Внизу).

СВЯЗАННЫЙ HTML

    <div class="container">
    <div class="row topRow">
         <div class="col-sm-3">
             <div class="icon">
                 <img src="http://placehold.it/200x200">
                 <p class="iconTitle">Title awdsad awd </p>
                 <p class="iconDescription">Description</p>
             </div>
         </div>
    </div>
</div>

СВЯЗАННЫЕ CSS

.container .topRow img {
    position: absolute;
    top: 90%;
    left: 20%;
}

.iconDescription {
    text-align: center;
    position: absolute;
    left: 20px;
    top: 235px;
}

.iconTitle {
    position: absolute;
    top: -35px;
    left: 135px;
    font-size : 25px;
    white-space:nowrap;
    text-align: center;
}

И изображение - http://i.imgur.com/vEQWDUT.png

Я знаю, что всегда мог бы сделать это вручную, но таких изображений будет много, но они не кажутся эффективными. Отметим, что в jQuery есть небольшие анимации, но это не причина (их все удалили, никакого эффекта).

Я пробовал миллион и одну вещь, но я все еще довольно нов, буду признателен за любые советы. Спасибо!

Answer 1

Я бы порекомендовал вам реструктурировать ваш HTML следующим образом:

<div class="container">
<div class="row topRow">
     <div class="col-sm-3">
         <div class="icon">
             <p class="iconTitle">Title awdsad awd </p>
             <img src="http://placehold.it/200x200">
             <p class="iconDescription">Description</p>
         </div>
     </div>
</div>
</div>

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

Когда дело доходит до вашего CSS, вы должны принять во внимание макет, с которым вы отображаете свои изображения.

Короче говоря, что вы хотите сделать, это

.icon{ position: relative;}

Таким образом, все, что находится внутри Icon, становится относительным к этому div. таким образом, когда вы абсолютно позиционируете свои элементы внутри него, это позиционирование будет связано с вашим "значком" div (например, top станет вершиной div). Также очень простой способ центрировать изображение и текст внутри этого элемента.

.icon p{text-align:center;}
.icon img{display:block; margin:0 auto;}

Позвольте мне знать, если это помогает.

Answer 2

Попробуйте установить .iconTitlecss имущество left в 22%

.container .topRow img {
    position: absolute;
    top: 90%;
    left: 20%;
}

.iconDescription {
    text-align: center;
    position: absolute;
    left: 20px;
    top: 235px;
}

.iconTitle {
    position: absolute;
    top: -35px;
    left: 22%;
    font-size : 25px;
    white-space:nowrap;
    text-align: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js">
</script>
  <div class="container">
    <div class="row topRow">
         <div class="col-sm-3">
             <div class="icon">
                 <img src="http://placehold.it/200x200" />
                 <p class="iconTitle">Title awdsad awd </p>
                 <p class="iconDescription">Description</p>
             </div>
         </div>
    </div>
</div>

jsfiddle http://jsfiddle.net/L389kv6h/