Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

Vertically Center Multi-Lined Text

Home › Forums › Pro Support › Vertically Center Multi-Lined Text

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • January 9, 2019 at 10:08 am #67543
    Tilman GrundigTilman Grundig
    Participant

    Hello and thank you for this amazing plugin!
    My question is, how it is possible to vertically center multi-lined text when for instance “Item Height” is set to 70 and “Item Line Height ” is set to 25? At the moment unfortunately the lines of my menu stick at the top …

    Thank you very much in advance for your answer.

    Best regards

    January 9, 2019 at 1:31 pm #67554
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Tilman,

    I don’t think that is possible. A line height smaller than the height will stick it to the top like that.

    Is there any reason you can’t set the height and line height to the same?

    Please advise

    Peter

    January 10, 2019 at 1:47 pm #67553
    Tilman GrundigTilman Grundig
    Participant

    Hey Peter,
    thank you for your answer! When “Item Line Height” has the same value as “Item Height” both lines of text are getting evenly spread in the box — and with “Item Height” set to 70 the space between them unfortunately becomes too big.

    Best regards,
    Tilman

    January 10, 2019 at 10:30 pm #67552
    Peter FeatherstonePeter Featherstone
    Participant

    Hey TIlman,

    Yeah unfortunately that will be the case. I’m not sure you can vertically align double lined text inside of a div.

    Maybe you can try the various vertical-alignment CSS options but I don’t think they will work. Have you tried Googling for CSS solutions to vertically aligning multi lined text?

    Peter

    January 11, 2019 at 7:38 am #67551
    Tilman GrundigTilman Grundig
    Participant

    Hey Peter,
    yes I did. It is possible when using
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    The problem then is that the table-cell doesn’t fill the entire width of the menu … so the container’s background-color is visible.

    There seems to be yet another solution which is described here: https://css-tricks.com/centering-in-the-unknown/
    But my css-knowledge isn’t that good to check how to apply this for responsive menu …

    Best regards
    Tilman

    January 11, 2019 at 8:19 am #67550
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Tilman,

    You can find the CSS classes easily by using the browser inspector tools and then just inspecting the particular element.

    Unfortunately you still haven’t provided your site URL so it’s hard to say as I can’t see the issue.

    I hope that helps

    Peter

    January 11, 2019 at 7:49 pm #67549
    Tilman GrundigTilman Grundig
    Participant

    Hey Peter,
    this is the page I am currently working on: http://zentrum-deradikalisierung.de/wp

    Although I’m using the browser inspector tools unfortunately I can’t figure out what the exact classes of the divs are — the div that contains the link-text and it’s parent. At the moment I am using:
    .responsive-menu-pro-item-link — for the div that contains the link-text
    li.responsive-menu-pro-item — for it’s parent
    but that doesn’t seems to be right as it has no impact. Do have any idea which class-names I should take instead?

    Thank you!
    Tilman

    January 13, 2019 at 9:18 am #67548
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Tilman,

    Thanks for the site address. I’ve had a play around with the site and can’t find a way to make it work. I’ve tried flexbox, justify-content, align-items options and none of the work for me I’m afraid.

    Your CSS classnames are correct, you will just likely need to append !important to any changes you make because otherwise the plugin CSS is probably overwriting them.

    Please let me know if you find a way of getting this to work with my plugin.

    All the best

    Peter

    January 17, 2019 at 7:09 am #67547
    Tilman GrundigTilman Grundig
    Participant

    Hey Peter,
    thank you for your effort! As I am still looking for a solution I stumbled across this page and it’s menu: https://drudel11.de/de/
    Centering multiple lines is working here. Do you have any idea what the difference could be between the menus?

    Best regards
    Tilman

    January 18, 2019 at 10:48 pm #67546
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Tilman,

    They seem to be just using padding on the top and bottom, similar to what the solution was on this support request https://responsive.menu/forums/topic/long-menu-titles/

    All the best

    Peter

    January 19, 2019 at 7:59 am #67545
    Tilman GrundigTilman Grundig
    Participant

    Hey Peter,
    I’ve finally found a working solution by adding the following lines of css:

    span.menu-image-title {
    height:100%;
    display:-webkit-box;
    -webkit-box-align:center;
    }

    Best regards
    Tilman

    January 19, 2019 at 4:56 pm #67544
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Tilman,

    Excellent! Thanks for letting me know.

    Peter

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Vertically Center Multi-Lined Text’ is closed to new replies.