I'm currently working on a footer layout and struggling to align the elements as desired. My goal is to have the "Logo" and icons in the "icon-container" vertically centered in relation to the first line of text within the "text-container," rather than both lines of text. Additionally, I need the "Imprint" text to remain horizontally centered with respect to the longer text.
Here is the relevant HTML and CSS code:
html, body {
margin: 0;
}
footer {
background-color: black;
color: white;
display: flex;
flex-direction: column;
padding: 10px;
p {
margin: 0;
}
}
div.row {
display: flex;
align-items: center;
justify-content: space-between;
}
.text-container {
display: flex;
flex-direction: column;
align-items: center;
row-gap: 20px;
}
.icon-container {
display: flex;
column-gap: 5px;
}<footer>
<div class="row">
<p>Logo</p>
<div class="text-container">
<p>A long long text</p>
<p>Imprint</p>
</div>
<div class="icon-container">
<p>Icon 1</p>
<p>Icon 2</p>
<p>Icon 3</p>
</div>
</div>
</footer> I am looking for guidance on achieving the layout where the "Logo" and icons are vertically centered with the first line of text ("A long long text") and not the second line ("Imprint"). Moreover, I want to ensure that "Imprint" remains horizontally centered with "A long long text". How can I accomplish this positioning?