Center elements within an image

Question

I have tried the solutions in here, here, here and many other sources but I can't seem to get what I want.

I'm using Kickstart template and I want to have an image and text/elements centered (horizontally and vertically) on it. This is what I have:

<div class="grid">
<div class="col_12" style="margin-top:50px;" >
        <div class="mainImage"> 
            <h2>h2 Text</h2>
            <h3>h3 Text</h3>         
        </div>
</div>

And my CSS:

.mainImage {
       height:400px;
       width:100%;
       background-image: url(img/Customers.png);
       text-decoration:line-through;
       display: flex;
       justify-content: center; /* align horizontal */
       align-items: center; /* align vertical */
 }

I have tried

display: table-cell; vertical-align: middle;

but these don't work.

Most solutions involve specifying a width. But I do not want to specify a width as I want the page to be responsive. If I use display:table it makes my background image smaller.

What I want is to: 1. Have an image in its own size 2. Have elements centered on it

Any suggestions I can try out?

Thank you.

What didn't work about the solutions listed? The is a very common question/solution — Zach Saucier, Apr 14 '14 at 15:55
this [Fiddle](http://jsfiddle.net/m4WCr/) with your code works... — Simone Melloni, Apr 14 '14 at 15:58
Thank you. I want the elements to be in separate lines.
didn't work in this case. — madu, Apr 15 '14 at 01:09

Simon · Answer 1 · 2014-04-14T19:18:05.780

I came across this issue a while ago. This is what I came up with:

HTML

<section id="abc">   
    <div class="table-cell">
        <div class="table-center">
            Centered
        </div>   
    </div> 
</section>

CSS

#abc {
    background: url(http://i.imgur.com/nvH8nI3.jpg) 50% 0 repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 500px;
    display: table;     
    -moz-box-shadow: inset 0 0 20px #333;
    -webkit-box-shadow: inset 0 0 20px #333;
    box-shadow: inset 0 0 20px #333;
}

.table-cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.table-center {
    display: inline-block;
    width: 460px;
    background: rgba(45, 45, 45, 0.80);
    border-radius: 5px;
    padding: 30px 30px;
    -webkit-box-shadow: 0 0 7px 2px #0F1519;
    box-shadow: 0 0 7px 2px #0F1519;
}

.col-centered {
    float: none;
    margin: 0 auto;
}

http://jsfiddle.net/3Js35/2/

Thanks Simon. But this involves specifying width. I do not want to that as I want it to be responsive. If I remove the width then the image resizes to the width of the table-center. — madu, Apr 15 '14 at 01:12

Center elements within an image

1 Answers1