2

I have a webpage in which, at the vertical center of the screen, there are three elements which should be placed evenly: an "about" link, a logo depicting an N letter, and a "music" link.

I want the elements to be placed evenly. Here's the CSS I applied to the parent container element:

.container {
    display: flex;
    align-items: center;
    place-content: space-evenly;
    height: 100%;
    width: 100%;
    margin: auto;
}

This is the HTML for the inner elements:

<div class="container">
    <a href="...">About</a>
    <img style="width: 65px; height: 65px;" src="img/n.png" />
    <a href="...">Music</a>
</div>

The result looks like this:

enter image description here

However, it appears to me there is some difference in the number of pixels that the links "About" and "Music" have from the middle of the page. It varies across different screen resolutions, but there are up to 5px differences in the distance that "Music" and "About" have from the central "N" image, the former being the closer one to the center.

I don't understand what this offset is coming from, but I suspect it may be due to the fact that the texts for the two links have slightly different widths, and the flex placing at even distances from the page margins, and not from the center.

This codepen demonstrates the issue: https://codepen.io/samul-11/pen/jOvwWQE

If that's the case, how do I obtain the result I described, in which the links have same distance from the middle of the page?

Samuele B.
  • 481
  • 1
  • 6
  • 29
  • I tried to measure the output using windows powertoys screen ruler and the difference was hardly 2px at most due to width of the characters. Do u have any measures for 5px diiference as u suggest? Also, `margin: auto` and `width: 100%` are not really adding to the layout as flex is automatically full width – Servesh Chaturvedi Mar 04 '23 at 14:26
  • 1
    Where do you want to measure from? e.g. is the rightmost visible pixel of the about to be placed the same distance from the leftmost pixel of the N as the leftmost pixel of music to the rightmost pixel of the N or…? – A Haworth Mar 04 '23 at 14:27
  • I assume you want the 'N' to be centered horizontally and then there must be distributed an even amount of space between the 'N' and the item to the left + right, correct? If so, yes, the varying widths of the 2 items to the left and right are what's causing the elements not to have an even amount of space. I wrote an answer [here](https://stackoverflow.com/a/75086731/14776809) about this issue, check it out and see if that helps. – Sigurd Mazanti Mar 04 '23 at 14:32

1 Answers1

0

By using align-items: center and justify-content: space-evenly the line with anchors and image is vertically centered, and horizontally the gaps (whitespace) between the items is equal in size.

It is possible that there is 1 pixel difference because there may be decimals after dividing the remaining space.

* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  margin: 0;
}
body {
  font: 400 16px/1.5 sans-serif;
}
img {
  width: 65px;
  height: 65px;
  border: 0;
}
.container, a, img {
  border: thin dotted blue;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 100%;
  width: 100%;
  margin: auto;
}
<div class="container">
  <a href="#">About</a>
  <img src="https://picsum.photos/id/220/65/65" alt="N" width="65" height="65">
  <a href="#">Music</a>
</div>
bron
  • 1,457
  • 1
  • 9
  • 18
  • is it the same both from the page margins and from the center? – Samuele B. Mar 04 '23 at 15:56
  • @SamueleB. What do you mean by ‘the center’. The four spaces are all the same size but the image is not quite centered as the About and Music are different lengths, very slightly. This is just geometry. You have to decide which is more important, having the N centered or equal gaps. – A Haworth Mar 04 '23 at 20:07
  • @AHaworth I think your comment made it clearer to me as to what the issue is. I want the N to be centered and I want the two texts to have equal distance from the centered N – Samuele B. Mar 04 '23 at 20:59
  • Thanks, that's much clearer - so the discrepancy in sizes will be the space from the left to the start ot 'Above' and the end of 'Music' to the right. You might like to update your actual question to spell that out. – A Haworth Mar 04 '23 at 21:12
  • @samuele. Each horizontal whitespace is equeal. The whitespace between page border and anchors is exactly the smae as between the anchors and image. Note that there may be a pixel difference if the remaining whitspace cannot divided by 4 (in this case there are 4 gaps). – bron Mar 05 '23 at 14:04
  • @bron yes each of the white spaces is equal, but the 'logo' is not in the center - it can't be unless the width of the two texts is exactly the same. – A Haworth Mar 05 '23 at 16:40