0
Welcome Guest! Login
0 items Join Now

CSS: Centering text to bottom center of container

Last Post
Search Topic

  • CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • I'm having trouble centering text to the bottom and the center of its container. I can get to work in a jsfiddle but not in my paradigm template.. I haven no clue what's going on.

      Here's the page:
      dev.exo-l.com/webshop/

      The container position is set to relative and the position of the text is set to absolute. Text is centered in the container. However for some reason when I set the position to "bottom" the text aligns to the left... Any ideas?

      I'm talking about the submenu

      Here's my LESS:
      //Webshop CSS
.shop-progress {
    height:80px;
    ul.menu {
            list-style: none;
            margin: 0;
            padding: 0;
            ul {
                    list-style: none;
                    display:inline-block;
                    height:80px;
            }
            li {
                    border-left: 1px solid rgba(255, 255, 255, 0.8);
                    box-shadow: -1px 0 0 #D1D1D1;
                    height:80px;
                    width:150px;
                    margin: 0 -3px 0 0;
                    display:inline-block;
                    text-align:center;
                    vertical-align:bottom;
                    a, .item, .separator {
                            display: block;
                            position:absolute;
                            bottom:0px;
                    }
                    a:before, .item:before, .separator:before {
                            content: none;
                            //margin-right: 10px;
                            display: inline;
                    }
                    &:last-child {
                            margin-bottom: 0;
                            border-right: 1px solid rgba(255, 255, 255, 0.8);
                            border-left: 1px solid rgba(255, 255, 255, 0.8);
                            box-shadow: 1px 0 0 #D1D1D1, -1px 0 0 #D1D1D1;
                    }
                    ul {
                        margin: 0 0 0 20px;
                        padding: 8px 0 0;
                    }
            }
            li.active.current, li#current.active {
                    //border: 0;
                    #gradient > .vertical(darken(@body-background, 8%),@body-background);
                    padding: 0;
                    > a {
                            color: @body-text;
                    }
                    > a:before, > .item:before, > .separator:before {
                            content: none;
                    }
            }
            ul.small {
                    font-size: 14px;
            }
    }
}

      This image is hidden for guests.
      Please log in or register to see it.
    • Last Edit: 11 years 1 month ago by Marcel Fleuren.
    #1069566
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • Can you post a screenshot? I'm not sure wich element you mean ...
    • Last Edit: 11 years 1 month ago by Henning.
    #1069571

  • Re: CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • updated my post, i was too concentrated with the issue that I forgot to mention what the problem was
    #1069572
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • that sounds like a strange idea to use position absolute for this.

      Just add this to your custom css file
      #rt-maintop .submenu ul.menu.l1 li .item {
	position: relative;
	padding-top: 50px;
}
    • Last Edit: 11 years 1 month ago by Henning.
    #1069576

  • Re: CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • isn't it bad practice to use relative positions like this? If I decide one day to make the height of the submenu smaller or larger this wouldn't work anymore. I do appreciate the effort!
    #1069627
    • Henning's Avatar
    • Henning
    • Preeminent Rocketeer
    • Posts: 29362
    • Thanks: 954
    • Volunteer

    Re: CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • using position absolute is bad practice imho.
      not so hard to adjust the padding you could even calculate that via LESS.
      But rule of thumb: keep things simple ...
    #1069629

  • Re: CSS: Centering text to bottom center of container

    Posted 11 years 1 month ago
    • Of course! I totally forgot I could do that! Will do chief!
    #1069634

Time to create page: 0.052 seconds