Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] adjust element horizontally

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #204793
    triplebit
    Participant

    In my website I have a phone number on top menu.
    I need it to adjust horizontally, meaning that it always should stay in the midlle,no matter what is the screen width(that said, I care only on desktops and not on smaller screens).
    Is there a solution:
    URL:http://triplebit.com/avada/
    Regards
    I. Lesher

    #204803
    Shikkediel
    Participant

    If I’m not mistaken, it’s not possible with CSS alone in this configuration. It would need a markup rewrite or some JS.

    #204814
    triplebit
    Participant

    Thx,
    Can you or somebody else advice how to do that with markup and/or js?
    I can implement both
    Regards
    I. Lesher

    #204818
    Paulie_D
    Member

    If I’m not mistaken, it’s not possible with CSS alone in this configuration. It would need a markup rewrite or some JS.

    Sure there is…absolute positioning…but that’s a bit like cracking a nut with a sledghammer.

    #204821
    triplebit
    Participant

    Thx
    Ok, with absolute position, how do I make it centralized.
    Can you elaborate and wright the code please?
    Regards
    I. Lesher

    #204831
    Paulie_D
    Member
    h1.phone_number {
        /* display: n; */ /* Huh? */
        /* float: left; */ /* remove this */
        /* display: inline-block; */ /* and this */
        /* margin-right: 85; *//* not valid anyway*/
        /* margin: 0; */ /* remove this */
        /* margin-right: left:40%; /* and this, which is also WTF */
        /* margin-left: 5%; */ /* remove this */
    
        font-size: 20px;
        font-family: serif;
        color: red;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
    
    #204832
    Shikkediel
    Participant

    I was assuming it should stay in the middle of the remaining space between the left and right divs…

    #204833
    triplebit
    Participant

    Thanks
    The technic of translate/transform is absolutly new for me.
    Thx for tha also

    #204839
    Paulie_D
    Member

    You are very welcome but I strongly suggest you run both your HTML & CSS through validators as there are some obvious errors in there.

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.