Center image and text at large width, allow both to shrink at small width?

Question

I have an image and text. When the layout is wider than the image I need the image and text to be centered, and for the text to be as wide as the image. When the layout is smaller I need the image and text to shrink.

My layout is responsive and the content is dynamic so the dimensions of the image will change.

enter image description here

The first part can be achieved with this: http://codepen.io/anon/pen/ZGyOmB

<div class="cont">
  <div class="cont2">
   <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
   <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
   </div>
  </div>

.cont {
  text-align: center;
}
.cont2 {
  display: table;
  width: 1px;
  margin: auto;
}
p {
  display: inline-block;
}
img {
  //max-width: 100%;
}

However when I set the image to have a max width of 100% so it can shrink at smaller displays, then it shrinks regardless. I know that this is happening because of the styles applied to div.cont2, but I need these styles for when the layout is wider than the image.

Is there another solution? As my image is dynamic content and its width will vary so I can't use a media query with an arbitrary break point.

What browsers are you trying to support? Your code seems to work fine on Chrome 43. The image and text are constant width and centered when the window is large, and then they both shrink down once the window gets smaller than the picture's width. — BurningLights, Jun 10 '15 at 16:55

Stickers · Accepted Answer · 2015-06-14T01:37:08.187

Here is the simplified demo, which has been tested and works great on IE8+, Chrome and Firefox.

JsFiddle Demo

body {
    margin: 0; /* reset default margin */
}
div {
    display: table; /* shrink to fit content */
    margin: 0 auto; /* center the element */
    text-align: center; /* center the content inside */
}
img {
    width: 100%; /* maintain image width to be responsive */
    height: auto; /* maintain image aspect ratio */
}
p {
    display: table-caption; /* the magic part, shrink to fit */
    caption-side: bottom; /* place it to the bottom */
}

<div>
    <img src="http://i.imgur.com/iHaA1Yt.jpg" />
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
</div>

Yandy_Viera · Answer 2 · 2015-06-15T03:26:50.877

The key is to let the image define the width of it container for this set display: inline-block to the container of the image (.cont2), then let the rest of the content fit the width of (.cont2), for this you have to set position: relative to (.cont2) and position: absolute to <p> and of course set max-width: 100% to the image to be responsive.

In your case it would be like this

.cont {
    text-align: center;
}
.cont2 {
    display: inline-block;
    position: relative;
    max-width: 100%;
}
img {
    max-width: 100%;
}
p{
    position: absolute;
}

<div class="cont">
    <div class="cont2">
        <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here.</p>
    </div>
</div>

Here a jsfiddle to play with

This does seem to work but absolutely positioning the text is dangerous for me. The content is dynamic so I dont know its height. — Evanss, Jun 15 '15 at 08:21

Avijit Kumar · Answer 3 · 2015-06-10T18:20:05.780

0

please check the below fiddle.

I hope this is what you wanted.

 .cont2 {
   display: table;
   margin: 0px auto;
   text-align: center;
 }
 .cont2 img {
   max-width: 100%;
   width: 100%;
 }
 p {
   padding: 5px 8px;
   caption-side: bottom;
   display: table-caption;
 }

<div class="cont">
  <div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.</p>
  </div>
</div>

This is the JSFIDDLE link.

edited Jun 10 '15 at 18:20

answered Jun 10 '15 at 16:28

Avijit Kumar

538
2
9

1

Whilst this may theoretically answer the question, it might be better to demo the solution showing the result. – Paulie_D Jun 10 '15 at 16:29
That doesnt do what I need at larger widths. The text becomes wider than the image. This was basically the entire point to my question. – Evanss Jun 10 '15 at 16:30

score 0 · Answer 4 · edited May 23 '17 at 12:30

0

Following a little searching I came across a previous question on SO

Attribution Link

This seems to fit the requirement.

JSfiddle Demo

.cont2 {
  display: table;
  margin: 0 auto;
}
.cont2 img {
  display: block;
  max-width: 100%;
}
p {
  display: table-caption;
  caption-side: bottom;
  padding: 5px 8px;
}

<div class="cont">
  <div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.</p>
  </div>

edited May 23 '17 at 12:30

Community

1
1

answered Jun 10 '15 at 16:33

Paulie_D

107,962
13
142
161

This doesnt work in IE. At smaller widths the content doenst shrink. – Evanss Jun 10 '15 at 16:47
what version of IE is this solution not working for? I just looked at it and looks to be working as requested. Can you elaborate? – Bob Tate Jun 13 '15 at 10:43

score 0 · Answer 5 · answered Jun 10 '15 at 16:40

This works perfectly in Chrome but not at all in IE.

http://codepen.io/anon/pen/ZGyOmB

<div class="cont2">
<img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
<p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
</div>

.cont2 {
  display: table;
  margin: 0 auto;
}
p {
    display: table-caption;
  caption-side: bottom;
}
img {
  display: block;
  max-width: 100%;
}

You're very close, you'll just need to change `max-width:100%` to `width:100%` that should be it, see my complete answer - http://stackoverflow.com/a/30825157/483779 — Stickers, Jun 14 '15 at 02:20

score 0 · Answer 6 · answered Jun 14 '15 at 00:48

I created following after some experiment and testing on IE and it's working fine as you are expecting.

http://jsfiddle.net/no3ootfp/

.cont2 {
    display: table;
    text-align: center;
    margin: auto;
}

.cont2 img {
    display: block;
    width: 100%;
}

.cont2 .text-wrap {
    display: table-caption;
    caption-side: bottom;
}

<div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <div class="text-wrap">
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
    </div>
</div>

Arpit Goyal · Answer 7 · 2016-03-04T15:57:43.340

This url have what you want: http://jsbin.com/fikevo/edit?html,output

Markup:

<div class="cont2">
    <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
    <div class="text-wrap">
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
    </div>
</div>

Styles:

.cont2 {
  display: table;
  text-align: center;
  margin: auto;
}

.cont2 img {
  display: block;
  width: 100%;
}

.cont2 .text-wrap {
  display: table-caption;
  caption-side: bottom;
}

score -2 · Answer 8 · answered Jun 10 '15 at 16:35

    .cont {
        width: 512px;
        max-width: 100%;
        margin:0 auto;
    }

    img {
        width: 100%;
    }

<div class="cont">
    <div class="cont2">
        <img src="http://www.vector-finder.com/site-images/too_big/fantasy_banner_vector.jpg" />
        <p>Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. Some text here. </p>
    </div>
</div>

Center image and text at large width, allow both to shrink at small width?

8 Answers8

Linked