Center a text with an image

Question

I have a web page with those elements :

I want that the content of the red rectangle to be in the green rectangle. (Thanks Paint !). So I just want to center the text with the picture.

I tried several things like

margin-right : auto;
margin-left : auto;

Or I tied to use the z-index. But I don't find the right thing to do. Can someone help me please ?

EDIT 1 :

Code of the first content (text)

.firstSection
{
    margin-left : 150px;
    margin-right : 150px;

}

Code of the image

#imageMeeting
{
    margin-right : 500px;
}

Edit 2 :

Here is my html code :

<div class="container-fluid" id="firstSection">
    <div class="row firstSection" >
        <div class="titre1 text-uppercase">Qui somme-nous ?</div>

            <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 v-align">
                <p class="sousTitre quisommesnous">Nous nous présentons en quelques mots ...</p>
                <p class="quisommesnous">Vivamus tristique ligula ut commodo finibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin sit amet tellus blandit, tincidunt enim eu, consectetur leo. Pellentesque tincidunt sit amet risus quis placerat. Donec hendrerit arcu at magna sodales posuere.</p>
                <p class="quisommesnous">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Morbi imperdiet accumsan lacus, sed efficitur justo rhoncus at. Duis eu velit accumsan, eleifend dui vitae, iaculis justo.</p>
                <button class="text-uppercase btn btn-default" id="bouton">En savoir plus</button>
            </div>

        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 v-align">
            <img src="images/meeting.jpg" class="img-responsive" id="imageMeeting">
        </div>
    </div>

</div>

And the css I updated :

.v-align
{
    vertical-align: middle;
    display: inline-block;
}

Probable duplicate - http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image?rq=1 — Paulie_D, Dec 01 '15 at 15:31
fyi: z-index is for "3d" text - text that's farther in/out of your screen. it has nothing to do with vertical positioning.and adjust left/righ margins will also do nothing to vertically align text. — Marc B, Dec 01 '15 at 15:34
@YenneInfo Thanks for your useful comment ! Of course, you've never been a beginner, or you're never blocked by something easy ! — Erlaunis, Dec 01 '15 at 15:46
It's not about experience, you've an experience of 5 month on this website, and still don't know how post a answerable question ? Read this http://stackoverflow.com/help/how-to-ask — BENARD Patrick, Dec 01 '15 at 15:59
@YenneInfo Sorry if my post was not clear, it's hard to be understood when we don't speak english very well. — Erlaunis, Dec 01 '15 at 16:04

Praveen Kumar Purushothaman · Accepted Answer · 2015-12-01T16:25:40.720

3

Using vertical-align?

body {text-align: center;}
.text-container,
.image {display: inline-block; max-width: 45%; vertical-align: middle;}

<div class="text-container">
  <h3>Hello</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit quaerat, laudantium eum.</p>
</div>
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" class="image" />

Preview

In your JSBin code, just replace the .v-align class:

.v-align {
  vertical-align: middle;
  display: inline-block;
  float: none;
  max-width: 45%;
}

Fiddle: https://jsbin.com/xoquhayuqa/1/edit

edited Dec 01 '15 at 16:25

answered Dec 01 '15 at 15:35

Praveen Kumar Purushothaman

164,888
24
203
252

I checked, don't worry ^^ But I'm still trying, it doesn't work yet. – Erlaunis Dec 01 '15 at 15:56
@Erlaunis Can you build a [jsBin](http://jsbin.com) so that I can also play around to make it work? Did you add `display: inline-block;` and `vertical-align`? – Praveen Kumar Purushothaman Dec 01 '15 at 15:58
@Erlaunis Have a look at the updated answer and the fiddle: **https://jsbin.com/xoquhayuqa/1/edit**. – Praveen Kumar Purushothaman Dec 01 '15 at 16:25

score 0 · Answer 2 · edited Dec 01 '15 at 15:51

0

Try this:

Put the text content and the img in the same <div>
Create another <div> for the text content
Make a v-align on CSS for this last <div>

Should be like this:

HTML:

<div>
   <div id="TextContent">
     <p>Your text here</p>
   </div>
   <img src="...">
</div>

If you're using Bootstrap, you could add the class .v-align to the TextContent div. Otherwise, you should create a css class like:

.v-align {
    vertical-align: middle;
}

And append that to the inner <div> like:

<div id="TextContent" class="v-align">...</div>

edited Dec 01 '15 at 15:51

SidOfc

4,552
3
27
50

answered Dec 01 '15 at 15:44

Niquito

11
3

I'm using bootstrap, but I don't find the v-align in the doc :/ – Erlaunis Dec 01 '15 at 15:51
Yep, me neither. Should be one of the first classes I've made, and keep using aside Bootstrap. Anyway, please create that class and try it; it should help. – Niquito Dec 02 '15 at 11:46

Center a text with an image

2 Answers2