How to Vertically Center Logo and Icons with Respect to the First Row in Footer?
I'm working on a footer layout and I'm having trouble aligning the elements as I want them. I need the "Logo" and the icons in the "icon-container" to be vertically centered with respect to the first line of text in the "text-container", not with respect to both lines of text. Additionally, the "Imprint" text should remain horizontally centered with respect to "A long long text".
Here's the relevant HTML and CSS code: https://jsfiddle.net/vqL23zu4/9/
I want the "Logo" and the icons to be vertically centered with the first line of text ("A long long text") and not with the second line of text ("Imprint"). Also, "Imprint" should stay horizontally centered with "A long long text". How can I achieve this layout?
Here's the relevant HTML and CSS code: https://jsfiddle.net/vqL23zu4/9/
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 want the "Logo" and the icons to be vertically centered with the first line of text ("A long long text") and not with the second line of text ("Imprint"). Also, "Imprint" should stay horizontally centered with "A long long text". How can I achieve this layout?
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
