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/
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?Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
4 Replies
change
div.row {align-items: start} instead of aligning them to centerThank you very much
I think
should align to the first line of text also ; looks nearly identical to
start in the cases I’ve used but if the items differ enough in size or line -height I would guess there would be a more noticeable differenceThank you very much 🙏