5

I have a flex container with a picture and text beside it. This container is centered on the page. When I shrink the page causing the text to word-wrap, the container no longer looks centered because the text div doesn't shrink down to the size of the word wrapped text.

Is it possible to shrink the text div when word wrap occurs?

See JSFiddle here.

It might be tough to see what I'm talking about with the snippet because you might not be able to shrink the page enough to see the wrap happen. Better off looking at the jsfiddle.

.container,
.content {
  display: flex;
  justify-content: center;
}
.picture {
  height: 130px;
  width: 130px;
  background-color: blue;
}
.text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.name {
  font-size: 22px;
}
<div class="container">
  <div class="content">
    <div class="picture"></div>
    <div class="text">
      <div class="name">John Jacobjingleheimer</div>
    </div>
  </div>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
user4584963
  • 2,403
  • 7
  • 30
  • 62
  • add a `text-align: center` to `name` and it looks better aligned I guess... what do you think? – kukkuz Sep 29 '16 at 15:36
  • @kukkuz thanks but not really what I'm looking for. It actually might not even be possible. Once the word wrap happens the container no longer looks centered because there appears to be more margin on the right than the left. – user4584963 Sep 29 '16 at 15:47
  • possible duplicate: [Make container shrink-to-fit child elements as they wrap](http://stackoverflow.com/q/37406353/3597276) – Michael Benjamin Sep 29 '16 at 15:55

1 Answers1

0

I'm not sure this is the answer you're looking for but from reading what you wrote I think you're looking for

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

The above margin-left: and margin-right: with the auto value will cause the browser window to automatically calculate the left and right margin of the 

.text {
  display: flex;
  margin-left: auto;
  margin-right: auto;
  flex-direction: column;
  justify-content: center;
}
scott peters
  • 1
  • Not exactly. When you shrink the page browser width and the word-wrap happens, the left margin is about 8px but to the right it looks like its 30px. It is not actually 30 but it appears like that because the div that the name is in, is not shrinking to the edge of the last name. – user4584963 Sep 29 '16 at 15:46