Archived topic

CSS trick: align text

5 replies · Started by Sebastien on May 13, 2019

Viewing posts 1–6 of 6

May 13, 2019 at 5:17 am #897695

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 =)

May 13, 2019 at 5:35 am #897708

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.

May 13, 2019 at 5:50 am #897721

Hi David,

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

May 13, 2019 at 6:17 am #897749

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;
}

May 13, 2019 at 9:07 pm #898457

beautifull !
thanks so much =)

May 14, 2019 at 3:27 am #898690

You're welcome

This archived topic is closed to new replies.

Start building better websites today.