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>
Stickers
  • 75,527
  • 23
  • 147
  • 186
Gad
  • 29
  • 7

1 Answers1

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>
Stickers
  • 75,527
  • 23
  • 147
  • 186
  • Indeed you could but one probably shouldn't since it's not data. – Shikkediel Sep 27 '15 at 14:02
  • This dont work for me:( – Gad Sep 27 '15 at 14:03
  • @Gad can you tell me which part didn't work? – Stickers Sep 27 '15 at 14:04
  • I copy you code .. and try fit to my And when im adding text picturce dosent center vertically it stay where it is. – Gad Sep 27 '15 at 14:13
  • @Gad it seems to be working fine here - http://jsfiddle.net/hs61v9hm/ – Stickers Sep 27 '15 at 14:15
  • @Shikkediel . Do not mistake and be wise :`display` doesn't change the tag/html structure . CSS has nothing to do with HTML content, **it only styles it** (do you think that `display:none;` remove the tags from html ? ) – G-Cyrillus Sep 27 '15 at 14:18
  • Yea..that what i want to achive ... Maybe beacuse i have this css propetis for this div .pic { padding-right:25px; float:right; } .txt { width:300px; float:left; that dosent work – Gad Sep 27 '15 at 14:20
  • @Gad , you said it :), remove the float and let the display be efficient – G-Cyrillus Sep 27 '15 at 14:22
  • Yeap .. float block it ... Now it work fine . Thank you very much ... Have Good Day – Gad Sep 27 '15 at 14:28
  • @Gad great, don't forget to mark it as accepted. – Stickers Sep 27 '15 at 14:31
  • Thanks for the help of troubleshooting :) @GCyrillus – Stickers Sep 27 '15 at 14:33
  • I am wise and not a fan of patronisation, @GCyrillus. Displaying elements as if they were data is the last thing I'd resort to. I know it's popular but it's still a hack and there are much slicker approaches out there. – Shikkediel Sep 27 '15 at 21:13
  • @Shikkediel for me, as long as the markup structure makes sense, what you do with CSS doesn't really matter. whatever the easiest way is should be considered as a good solution. fyi, If you look closer into Bootstrap it uses lots of `table-cell` stuff for non data structure. And you feel free to post a better answer if you have as always. – Stickers Sep 27 '15 at 21:52
  • @Shikkediel thereis no hack in using value such as table/table-cell/list-item/inline-block/flex or whatever. there is no semantics in CSS. – G-Cyrillus Sep 27 '15 at 21:54
  • It may not be wrong but it feels gross, lol. Doesn't make it right just because Bootstrap does it... – Shikkediel Sep 27 '15 at 22:13
  • @Shikkediel i'm not saying Bootstrap does it right or wrong, in fact I rarely use it on my projects. Just saying it as an example, to tell it's being used widely. – Stickers Sep 27 '15 at 22:32
  • I'm not hating, just liking in another direction... this would serve best when deep browser support is required. – Shikkediel Sep 27 '15 at 22:43