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

[asasass]

I’m stuck on how I would do this.

Edit fiddle - JSFiddle - Code Playground

  .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>

[PaulOB]

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.

[Erik_J]

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.

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

[asasass]

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

Edit fiddle - JSFiddle - Code Playground

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

[PaulOB]

@asasass

The text isn’t in the middle of the circle

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.

[mark334]

Hi @asasass,

I’ve got an example on CodePen.

Here’s the result.

Shout if you have any more questions

mark

[Erik_J]

@mark334

Here’s the result.

I think you happen to omit the cross axis centering.

Nice to make it a list though.

[mark334]

Hi @Erik_J,

I think you happen to omit the cross axis centering.

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

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.

Thanks!