How to keep the middle letter in the center?

Question

I have the following HTML structure (which cant be changed):

<div className='spritz'>
     <div className='left'></div>
     <div className='middle'></div>
     <div className='right'></div>
</div>

The middle has one letter which contains the middle letter of a random word and the left and right have the rest of the letters.

How can I style it that no matter what kind of word I'm generating the middle letter will be in the middle of the screen?

For instance:

  Hello // (Right = He, Middle= l, Left = lo
   How  // (Right = H, Middle= o, Left = w
Wonderful // (Right = Wond, Middle= e, Left = rful
Different
   Hi

Thanks!!

Hi, Welcome to SO, to ask a better question please take a look at [this](https://stackoverflow.com/help/how-to-ask) and remember codes that you try that make you fail. — sajjad rezaei, Jan 16 '22 at 16:43
what's the middle letter when there are an even number of letters? also, can you use javascript? — DCR, Jan 16 '22 at 16:45

score 1 · Accepted Answer · answered Jan 16 '22 at 16:47

CSS-Grid can do that.

.spritz {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

body {
  position: relative;
}

body::after {
  content: "";
  width: 1px;
  height: 100vh;
  position: absolute;
  background: red;
  left: 50%;
  top: 0;
}

.left {
  text-align: right;
}

<div class='spritz'>
  <div class='left'>Spider</div>
  <div class='middle'>-</div>
  <div class='right'>Man</div>
</div>

<div class='spritz'>
  <div class='left'>Wonder</div>
  <div class='middle'>W</div>
  <div class='right'>oman</div>
</div>

Thanks a lot! That worked! However im not sure I understand why. Do you have the time to add a short explanation maybe? Its important for me to understand and not just copy and paste — Naveh Mevorach, Jan 16 '22 at 17:09

How to keep the middle letter in the center?

1 Answers1