'How to align 3 divisions in a row such that the last element is at the middle of the page?

How can I align 3 divs in a row, equally spaced, such that the last (rightmost) element is at the center of the page?

htmlcssformatting


Solution 1:[1]

I think this is what you are looking for https://jsfiddle.net/o8z6exn5/2/

Set the wrapper to 50vw then display: flex; and justify-content: space-between; to equally space elements on left side of screen.

HTML

<div class="wrapper">
  <div class="align">

  </div>
  <div class="align">

  </div>
  <div class="align">

  </div>
</div>

CSS 

.wrapper {
  display: flex;
  justify-content: space-between;
  width: 50vw;
}

.align {
  height: 10px;
  width: 10px;
  background-color: red;
}

Solution 2:[2]

The way I understood your question is that the rightmost div is supposed to be in the center of the page. In other words, the center of that div should match the center of the screen.

To do that we need a wrapper that is 50 % of the width of the screen + 50 % of the width of the rightmost div. For example, if the width of the screen is 1000px and the width of the div is 50px, the wrapper should then be 500px + 25px = 525px in width.

Equation above can be written in CSS like so width: calc(50vw + (var(--div-width) / 2));

Below is a snippet to a working solution. In case you wanted to make it so that the right edge of the rightmost div is in the center of the screen you simply need to make .wrapper have the width of 50vw.

:root {
  --div-width: 50px;
}

.wrapper {
  width: calc(50vw + (var(--div-width) / 2));
  display: flex;
  justify-content: space-between;
}

.item {
  background-color: red;
  height: 50px;
  width: var(--div-width);
}
<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Adam Buchanan Smith
Solution 2

Related Questions