Within my Angular application, I have a list where each item can be comprised of either a small image with accompanying text or just text alone.
li {
display: flex;
border: 1px solid black;
width: 80%;
margin-bottom: 5%;
list-style: none;
position: relative;
}
.text {
text-align: center;
width: 100%;
background: lightgrey;
}
.image {
background: red;
width: 25%;
height: 100%;
position: absolute;
}<ul>
<li><div class="text"><p>item 1<br/>some text</p></div>
</li>
<li><div class="image"></div><div class="text split"><p>item 2<br/>some text</p></div>
</li>
<li><div class="image"></div><div class="text split"><p>item 2<br/>some more text in a very very long line which may break at the end</p></div>
</li>
</ul>If an image is present alongside the text in an item, the alignment of the text within the containing div will shift. This results in both texts not being vertically aligned as desired. I am seeking a way to centralize the text of item2 within the li element so that it aligns consistently with its predecessor without relying on JavaScript if possible.
UPDATE: The usage of position: absolute appears to resolve the issue. However, lengthy text lines fail to be wrapped seamlessly and instead overlap or hide behind the red div block. Given that the red div will eventually hold an image, overlaying text directly above it poses drawbacks.
While manual calculations for text widths could solve this concern, I am exploring simpler alternatives.
To elaborate, I aim to center the text within the list item itself (and not within the text div) while ensuring line breaks function akin to a div styled with 'width: 75%'.
Any additional pointers?
Appreciate your insights