Menu
My idea is to make each element within divs that have the .main_content class, to have a width equal to the width of the text inside it. How do I this?
As you can see, the width of each one (span, h2, p and h6) is the same as the .main_content div. The red border demonstrates this.
So, how do I make the width of each div fit the text within those divs? (With only CSS)
.main_content {
width: 100%;
height: 400px;
font-weight: 800;
}
.main_content > * {
border: 1px solid red;
display: block;
margin-bottom: 30px;
text-align: center;
}<div class="first_article">
<div class="first_content">
<div class="main_content">
<span class="growth">Growth</span>
<h2>5 compelling user referral campaign examples</h2>
<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
</p>
<h6>Author</h6>
</div>
</div>
</div>P: I've been trying to manually set the size of width of each element. But there is too much code. Is there any clever way to to this?
923
Using inline-block property: Use display: inline-block property to set a div size according to its content.
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Save this answer. Show activity on this post.
Using CSS, you can center text in a div in multiple ways. The most common way is to use the text-align property to center text horizontally. Another way is to use the line-height and vertical-align properties. The last way exclusively applies to flex items and requires the justify-content and align-items properties.
You can try with below css and see if it works.
.main_content {
width: 100%;
height: 400px;
font-weight: 800;
}
.main_content>* {
border: 1px solid red;
display: table;
margin: 0 auto;
margin-bottom: 30px;
text-align: center;
}<div class="first_article">
<div class="first_content">
<div class="main_content">
<span class="growth">Growth</span>
<h2>5 compelling user referral campaign examples</h2>
<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
</p>
<h6>Author</h6>
</div>
</div>
</div>Just 1 CSS function: width: fit-content
Note here: It doesnt work in IE.
Try it out:
.main_content {
width: 100%;
height: 400px;
font-weight: 800;
}
.main_content > * {
border: 1px solid red;
display: block;
margin-bottom: 30px;
text-align: center;
width: -moz-fit-content;
width: fit-content;
}<div class="first_article">
<div class="first_content">
<div class="main_content">
<span class="growth">Growth</span>
<h2>5 compelling user referral campaign examples</h2>
<p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
</p>
<h6>Author</h6>
</div>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
