Happy Halloween! Get 20% off GP Premium with the discount code: HALLOWEEN20

[Resolved] CSS trick: align text

Home Forums Support CSS trick: align text

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #897695
    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 =)

    #897708
    David
    Staff
    Customer Support

    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.

    #897721
    Sebastien

    Hi David,

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

    #897749
    David
    Staff
    Customer Support

    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;
    }
    #898457
    Sebastien

    beautifull !
    thanks so much =)

    #898690
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.