Centering text in the middle while using text-align: left;

I’m stuck on how I would do this.
https://jsfiddle.net/h7bysvma/7/

  .window {
    display: table;
    text-align: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid green;
  }

  span {
    display: table-cell;
    vertical-align: middle;
    font-size: 18px;
    color: red;
  }

<div class="window">
  <span>Console <br>
  Something<br>
  Sports <br>
  Display<br> 
  Text <br> 
  Settings</span>
</div>

Add margin:auto to .window and it will centre.

That structure looks like it should be a list (ul, li).

Never use breaks just to make a new line unless its lines in a poem or a song. Anything else is probably a sentence and should be in a p tag or in the case of what you have shown above it should b an unordered list structure.

Nine times out of a ten a break is the wrong choice.

3 Likes

Try using flex-box instead, like:

  .window {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid green;
  }
  span {
    font-size: 18px;
    color: red;
  }

I also second what @PaulOB says. :slightly_smiling_face:

(If other issues comes to mind, you could make it a new topic. :wink:)

2 Likes

Adding: margin:auto; did not work.
The text isn’t in the middle of the circle

https://jsfiddle.net/5bsLuvzf/

  .window {
    display: table;
    text-align: left;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    border: 1px solid green;
    margin:auto;
  }

You didn’t mention anything about the circle I assumed you wanted the whole thing in the middle.

Erik has given you the code you need. :slight_smile:

3 Likes

Hi @asasass,

I’ve got an example on CodePen.

Here’s the result.

Shout if you have any more questions :wink:

mark

I think you happen to omit the cross axis centering. :thinking:

Nice to make it a list though. :slight_smile:

Hi @Erik_J,

I think you happen to omit the cross axis centering. :thinking:

Correct. If I wanted the list vertically and horizontally aligned, I would ditch flex and go with grid. Saves me one SLOC :wink:

display: grid;
place-items: center;

I added a note in my pen to add align-items: center; or use grid as needed. Pick your poison.

Nice to make it a list though. :slight_smile:

Thanks!

1 Like