CSS center floated links

Question

I have a jsfiddle here - https://jsfiddle.net/1w5c1qq2/3/

I know this is simple but it's driving me mad

I have a div containing a ul list with a links in.

I need the links to be dead center, I need the gap between the links to be dead center.

Whatever I do the links are always slightly off.

Is there a way to have them dead center.

In the actual design it is obvious as the page is split with a color down the center.

    <div class="block">
        <ul>
            <li><a href="#">Link One</a></li>

            <li><a href="#">Link Two</a></li>

        </ul>
    </div>

The list-items are already centered in your jsfiddle though. — AndrewL64, Sep 08 '15 at 21:43
Do you cancel out the margin and padding from user stylesheet's ul? — B7th, Sep 08 '15 at 21:43
In the reality, they weren't duplicate questions, although this question was highly unclear in its formulation. — peterh, Sep 09 '15 at 11:14

score 0 · Accepted Answer · answered Sep 08 '15 at 21:45

Here is another way to do what you want. Using position: absolute;, left: 50%;, and transform: translateX(-50%); on the ul element.

*{
    margin: 0;
    padding: 0;
}

.block{
    background: gray; 
    padding: 10px;
    height: 20px;
}

ul{
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

li{
    text-align: center;
    display: inline-block;
}

a{
    background: white;
    padding: 5px;
}

<div class="block">
    <ul>
        <li><a href="#">Link One</a></li>
        
        <li><a href="#">Link Two</a></li>
        
    </ul>
</div>

Reference: https://css-tricks.com/centering-percentage-widthheight-elements/

score 0 · Answer 2 · answered Sep 08 '15 at 21:58

Seems pretty dead center to me. It looks like the 'handle' (the tiny mark) to resize the window in jsFiddle isn't centered, so maybe that's why you think it didn't work.

However, it may also be a font issue. If the text in the links doesn't have the same width, the links themselves also won't be the same width. In that case, the block is centered, but the space between them won't be exactly in the middle. To solve that, give the links both the same width.

If you want the space between them to be centered, regardless of the elements width, you can do that as follows:

Put the lis next to each other and give them a fixed width so they can be positioned properly. Then, you can use text-align left and right to align the links inside them.

In the example below, I've used floats and a self-clearing on the ul to do this, but you could also use display: inline-block for the lis.

*{
    margin: 0;
    padding: 0;
}

.block{
    background: gray; 
    padding: 10px ;
}

ul{
    text-align: left;
    list-style: none;
}
li{
    display: block;
    float: left;
    width: 50%;
}
/* Right-align the link in the left li. */
li:first-child {
  text-align: right;
}
/* Clear the floated li's */
ul::after {
    content: "";
    clear: both;
    display: block;
}

a {
    background: white;
    padding: 5px;
    margin: 0 5px;
    width: 110px;
}

<div class="block">
    <ul>
        <li><a href="#">Link One</a></li>
        
        <li><a href="#">Link Two with a longer text.</a></li>
        
    </ul>
</div>

score 0 · Answer 3 · answered Sep 08 '15 at 22:08

Here's the solution: https://jsfiddle.net/1w5c1qq2/8/. It boils down to giving both boxes each 50% of the available width, and aligning the text within those boxes to the right and the left, respectively. Always mind implicit white-space with display-inline-blocked boxes!

<div class="block">
    <ul>
        <li><a href="#">Link One</a></li><!--

     --><li><a href="#">Link Two is wider just for show</a></li>

    </ul>
</div>

And:

*{
    margin: 0;
    padding: 0;
}

.block{
    background: gray; 
    padding: 10px ;
}

ul{
    list-style: none;
}

li{
    display: inline-block;
    box-sizing: border-box;
    width: 50%;
    text-align: right;
    padding-right: 3px;
}
li:last-of-type {
    text-align: left;
    padding-left: 3px;
}

a{
    background: white;
    padding: 5px;
}

CSS center floated links

3 Answers3