plugins - How to align a text left side while keeping vertically centered?

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

If you see this page, text are aligned left side but I also want them to align centered vertically. Similar to Middle Align + Left Align in excel.

You can see this image to see what I am looking for

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 6 years ago.

Improve this question

If you see this page, text are aligned left side but I also want them to align centered vertically. Similar to Middle Align + Left Align in excel.

You can see this image to see what I am looking for

• plugins

Share Improve this question edited Feb 19, 2019 at 11:16 Avinash Patel asked Feb 15, 2019 at 4:49 Avinash PatelAvinash Patel 3988 bronze badges 2

• You need to include more information, it's not easy for us to understand what it is you are asking. :) – Lewis Commented Feb 16, 2019 at 13:42
• Okay, i have added more details to explain it more – Avinash Patel Commented Feb 19, 2019 at 11:16

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 0

With flex:

.question-content-text {
    display: flex;
    align-items: center;
}

Without flex:

.question-content-text {
    position: relative;
}
.content-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

Use additional CSS rule.

.question-content-text{display:flex;align-items:center;}

The text will need to sit inside an element that has a width and left / right margins. For example, you would use a construct like this...

`<span style="width:50%;margin-left:25%;margin-right:25%">Here is my 
 text</span>`

Doing it like this will mean your text takes up the middle 50% of the available element, and it will align to the left of that middle 50% (unless you add something like text-align:center).

Most probably, you'll create a class in your custom css, with the attributes as above, and then just use the class wherever you want the text to appear like this.

`.my-center-text {width:50%;margin-left:25%;margin-right:25%;}`