[Resolved] CSS trick: align text

[Sebastien]

Hi,
In my sub-menu (you can see into my website), there is Icon & title.
It is ok when the title take only 1 line.
But if the text need 2 lines, then the texte is not centered under the text… but under the ICON + TEXT

How can I manage that?

The Icon is SVG inline:
<svg class="scaling-svg" id="Photo" viewBox="0 0 100 100" >

CSS:

.sub-menu .scaling-svg{
	width:18%;
	position: relative;
	top:0.5rem;
	margin-right:0.5rem;
}

HTML Menu item:
<svg> ....</svg> <span>Photographie</span>

thanks for any help =)

[David]

Hi there,

can you add the <span> tags to the other menu item labels. Currently those outputting two lines the text is being output as static HTML so there is no way to adjust its position relative to the icon.

[Sebastien]

Hi David,

Sorry for that !
I’ve done the <span> tagging for all submenu items.
thanks

[David]

You could do something like this:

.main-navigation .main-nav ul ul li a {
    display: grid;
    grid-template-columns: 40px auto;
    align-items: center;
}

And replace your SVG CSS with this:

.sub-menu .scaling-svg {
    width: 30px;
}

[Sebastien]

beautifull !
thanks so much =)

[David]

You’re welcome

[Author]

Posts