css/html - center-aligning text in a grid hex doesn't want to work

Question

Title says it all. I've got a grid of images (using bootstrap), each one has a title above it, but I can't get the title to behave like it's center aligned. I had problems recreating it in jsfiddle, but I made an image to explain (see bottom).

RELATED 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>

RELATED 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;
}

And the image - https://i.sstatic.net/5OWfL.png

I know I could always manually do it, but there's going to be a lot of these images, doesn't seem efficient. To note, there are some little animations in jQuery, but it's not the cause (deleted them all, no effect).

I've tried a million and one things, but I'm still pretty new, would appreciate any tips. Thanks!

Answer 1

I would recommend you re-structure your html like so:

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

This way your title winds up on top of your image, making it much more semantic when it comes to viewing it as simple text.

When it comes to your css what you have to take into account is the layout with which you're displaying your images.

In short what you want to do is this

.icon{ position: relative;}

This way everything that is inside Icon becomes relative to that div. that way when you absolutely position your elements inside of it, that positioning will be in relation to your "icon" div (top will become the top of the div, for example). Also a very simple way to center your image and text's inside that div.

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

Let me know if this helps.