I'm a bit confused by this situation. I've posted it on CodePen. Essentially, I'm utilizing block-inline to create a centrally aligned grid of square divs that wrap if the screen is too small.
.outer{
width: 100%;
text-align: center;
}
.inner{
margin: 0 auto; /* center */
}
.div{
margin: 10px;
display: inline-block;
width: 300px;
height: 300px;
}
The inner and outer divs are set up so that all the foo divs (within the inner div) will be centered.
<div id="outer">
<div id="inner">
<div class="foo">
Lorem ipsum dolor sit amet.
</div>
<div class="foo">
Suspendisse at condimentum orci, nec egestas diam.
</div>
</div>
</div>
Initially, everything seemed fine once I added in the content. However, upon inserting the content, an issue arose. The bottom text started aligning with the text from other foo divs, causing the divs to become misaligned. Is there a way to ensure that the text inside the div does not affect its position? Essentially, I want the content within each div to stay contained and not impact anything outside of it.