CSS center floated links [duplicate] - css

Question

This question already has answers here:
How can I horizontally center an element?
(133 answers)
Closed 7 years ago.
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>Link One</li>
<li>Link Two</li>
</ul>
</div>

Answer 1

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>Link One</li>
<li>Link Two</li>
</ul>
</div>
Reference:
https://css-tricks.com/centering-percentage-widthheight-elements/

Answer 2

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>Link One</li>
<li>Link Two with a longer text.</li>
</ul>
</div>

Answer 3

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>Link One</li><!--
--><li>Link Two is wider just for show</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;
}