How to align Item in the middle without flex?

Question

I am trying to align Header text using flex. But the alignment does not work the way I expected.

Here are the two images of Blog and About.

These items are aligned using space-between.

container: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
} 
// btw, I am using material-ui class

However the position of text Blog and About is different due to the different size and element of the link text and three-dots icon.

How can I locate text Blog as same position as About?

Does that selector really work? `container:` isn't a valid selector. Also, the images posted are not very useful, so include relevant HTML as well. In fact read how to make a [mcve]. — zer00ne, May 27 '21 at 02:48
@zer00ne I did not show full usage of makeStyles supported by material-ui css — GoonGamja, May 28 '21 at 02:03

score 2 · Accepted Answer · answered May 27 '21 at 02:49

2

You can use grid to make 3 even columns and then it won't care about even spacing between the elements and will keep them where you want them.

Then align the text in the center for the middle column and on the right for the right column.

.container{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
}

.center-div{
    text-align: center;
}

.right-div {
    text-align: right;
}

answered May 27 '21 at 02:49

Sean

936
4
15

good. I could use grid supported by material-ui – GoonGamja May 27 '21 at 04:14

score 0 · Answer 2 · answered May 27 '21 at 02:39

Have you tried bootstrap Horizontal alignment. Centered with .justify-content-center:

https://getbootstrap.com/docs/4.0/components/navs/

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

score 0 · Answer 3 · answered May 27 '21 at 02:51

position: absolute, and margin: auto auto;

Another alternative using flex, you can add an empty element (dummy elemet) something like "" where the three dots are, so it will have the same relative center as the other one, you can add some padding to the Back to about to make it the same width as the Back To blog list.

Hope this helped.

How to align Item in the middle without flex?

3 Answers3