5

I've got an issue with wrapping text.

I'd like the content of my item to be centered (Which I've done with justify-content: center;)

But when the text wraps - I would like that text to be aligned to the left.

However, when the text does wrap, the the width of the parent element is automatically 100%. So while the text IS left aligned, the content doesn't seem centered, because it can't really be centered with a 100% width.

I hope that makes sense!!

Any help would be great!

Here's a fiddle of my problem: https://jsfiddle.net/whqbonad/38/

.container {
  width: 300px;
  margin: 0 auto;
 }

.item {
  width: 50%;
  float: left;
  background: #e3e3e3;
  margin: 10px 0;
  padding: 20px;
  box-sizing: border-box;
 
  display: flex;
  justify-content: center;
}
<div class='container'>
  <div class='item'>
    <span>Hello 1</span>
  </div>
  <div class='item'>
    <span>Hello 2</span>
  </div>
  <div class='item'>
   <span>Hello 3</span>
  </div>
  <div class='item'>
    <span>Hello 4</span>
  </div>
  <div class='item'>
    <span>Hello 5</span>
  </div>
  <div class='item'>
    <span>Hello but longer!</span>
    <!-- I want this to be centered, but the text be left aligned -->
  </div>
</div>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
Nick
  • 2,261
  • 5
  • 33
  • 65
  • 1
    More or less the same issue as this one here, https://stackoverflow.com/questions/41389292/, I think - you want the inline element to shrink to as little width as the text content needs. (The solution using `display: table-caption` does not seem to work here though, not sure if it is actually possible in this situation.) – CBroe May 07 '21 at 09:03
  • remove flex and use text-align:center – doğukan May 07 '21 at 09:18
  • 1
    @doğukan Sorry, I think my question might be confusing. I want the span to be centered, but the text content to be left aligned. The problem is, the word wrap causes the span on the last item to have a full width. Meaning the centering does nothing because it can't be centered. I'd like the width of my span to be the width of the content. I think it's a wrapping issue, but I don't really understand – Nick May 07 '21 at 09:32

1 Answers1

-1

this code work properly

.container {
  width: 300px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto;
}

.item {
  flex-basis: 50%;
  background: #e3e3e3;
  margin: 10px 0;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

span {
  display: block;
  width: 80%;
  background: red;
  text-align: left;
  height: 100%;
}
<div class='container'>
  <div class='item'>
    <span>Hello 1</span>
  </div>
  <div class='item'>
    <span>Hello 2</span>
  </div>
  <div class='item'>
    <span>Hello 3</span>
  </div>
  <div class='item'>
    <span>Hello 4</span>
  </div>
  <div class='item'>
    <span>Hello 5</span>
  </div>
  <div class='item'>
    <span>Hello but longer!</span>
  </div>
</div>
mohammad13
  • 453
  • 3
  • 17
  • all other changes are unnecessary. the `text-align: center` does the job. – doğukan May 07 '21 at 09:27
  • yes but look my code is fixed the height of ```hello 5``` column and ```Hello but longer!``` and the structure to change is more flexible – mohammad13 May 07 '21 at 09:30
  • Sorry, I think my question might be confusing. I want the span to be centered, but the text content to be left aligned. The problem is, the word wrap causes the span on the last item to have a full width. Meaning the centering does nothing because it can't be centered. I'd like the width of my span to be the width of the content. I think it's a wrapping issue, but I don't really understand – Nick May 07 '21 at 09:31