0

I have a question, how can I center the image inside the div? to have text on the left and image on the right. The height of this div is not set in the CSS, because I want it to increase automatically if I add more text, and I want the image be always centered vertically. Is this possible?

<div class="container"> <div class="text"> <h2>Hello</h2> <p>BlaBLA BLA BLA</p> </div> <div class="pic"> <img src="img/images/img-producent_53_53.jpg" /> </div> <div class="clear"></div> </div>
Improve this question
2
  • I update my post to example of code i have Commented Sep 27, 2015 at 13:45
  • Try use this approach for centered img. Commented Sep 27, 2015 at 13:53

1 Answer 1

Reset to default
1

You could use CSS table cell + vertical align feature.

.text, .pic { display: table-cell; vertical-align: middle; }

The "clear" div won't be necessary if you do it this way.

.text, .pic { display: table-cell; vertical-align: middle; }
<div class="container"> <div class="text"> <h2>Hello</h2> <p>BlaBLA BLA BLA</p> </div> <div class="pic"> <img src="img/images/img-producent_53_53.jpg" /> </div> </div>

Improve this answer
Sign up to request clarification or add additional context in comments.

17 Comments

Indeed you could but one probably shouldn't since it's not data.
This dont work for me:(
@Gad can you tell me which part didn't work?
I copy you code .. and try fit to my And when im adding text picturce dosent center vertically it stay where it is.
@Gad it seems to be working fine here - jsfiddle.net/hs61v9hm
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.