I want the text div to be centered but the text to be aligned left.
The inner div (#introduction-child) is wider than its content. Instead it should be the width of the text (max-width 80vw).
The font-size seems to be changing the font size without changing its containers width.
Any idea how I can make it fit to content?
EDIT: I want the width of the child container to adjust [if the text is too wide for the container (>80vw)] to the width of the text after a linebreak happened. Please see photos below what it is supposed to look like/what it should not look like.
#introduction {
display: flex;
justify-content: center;
background-color: grey;
height: 100vh;
width: 100vw;
}
#introduction-child {
overflow-wrap: break-word;
max-width: 80vw;
background-color: #80b0ff;
margin-top: 28vh;
}
#introduction h2 {
font-size: 1.8em;
/* ??*/
}<div id="introduction">
<div id="introduction-child">
<h2>Max Mustermann</h2>
<h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
<h2>Lorem amet, consectetur ad</h2>
</div>
</div>This is what it is supposed to be like
The Blue box should shrink to the text width. The red part should not exist
4
give the min height and width to max to outer wrapper and then gave width as fit-content to the children with max height and width
this is my version of the answer and hope this works 🙂
#introduction {
display: flex;
justify-content: center;
background-color: grey;
min-height: 100vh;
min-width: 100vw;
}
#introduction-child {
overflow-wrap: break-word;
width: fit-content;
max-width: 80%;
max-height: 80%;
background-color: #80b0ff;
margin-top: 20vh;
}
#introduction h2 {
font-size: 1.8em;
}
<div id="introduction">
<div id="introduction-child">
<h2>Max Mustermann</h2>
<h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
<h2>Lorem amet, consectetur ad</h2>
</div>
</div>1
I want the text div to be centered but the text to be aligned left.
This is exactly what happens in your snippet. No problem.
The inner div (#introduction-child) is wider than its content. Instead
it should be the width of the text (max-width 80vw).
No, your snippet shows that the the inner div is the same width as the text. No problem.
The font-size seems to be changing the font size without changing its
containers width.
I do not understand what you mean, and the font-size does not appear to change.
to solve this problem please use align-item:center instead of justify-content: center;
#introduction {
display: flex;
justify-content: center;
align-items: center; /* This vertically centers the content */
background-color: grey;
height: 100vh;
width: 100vw;
}
#introduction-child {
display: inline-block; /* Allows the width to fit the content */
max-width: 80vw; /* Constrains the maximum width */
background-color: #80b0ff;
text-align: left; /* Ensures text is left-aligned */
margin-top: 28vh;
}
#introduction h2 {
font-size: 1.8em; /* Font size scaling */
margin: 0; /* Removes default margin if needed */
}<div id="introduction">
<div id="introduction-child">
<h2>Max Mustermann</h2>
<h2>Lorem ipsum dolor sit amet, consectetur ad</h2>
<h2>Lorem amet, consectetur ad</h2>
</div>
</div>3