I have a div (.quote) in which another div (.centered) should be centered inside the viewport (here simulated with anohter div). The text inside .centered should be left-aligned. The text has some predefined linebreaks, but should break on other words as well if necessary.
.viewport {
width: 440px;
border: 1px solid red;
}
.quote {
display: flex;
flex-direction: row;
justify-content: center;
}
.txt {
font-size: 64px;
}
<div class="viewport">
<div class="quote">
<div class="centered">
<span class="txt">This is a long text, with a<br>predefined linebreak</span>
<br>
<span class="author">It's me</span>
</div>
</div>
</div>
This works fine as long as the viewport is wide enough (delete width in class viewport):
But as soon as it gets narrow, the div.centered isn’t centered anymore (set viewport.width to 440px):
As you can see, the text is now suddenly left aligned, leaving a space on the right side.
What might be the problem and how can I get rid of it?
Edit: This is would I would have expected:
You need to sign in to view this answers
Leave feedback about this