How to align text center in a Box which (text) is Vertical -rl aligned

Question

I have a Box and the text i want to show as vertical ,

I used writing-mode : vertical-rl to align it so , as :

I am trying to get the text to center :

using text-align : center or justify-content : center but nothing worked

Present CSS used is as:

I have also gone through few other SO Q's but nothing worked

req O/p :

Box size varies dynamically, but text should be aligned at center (for any padding suggestions).. May I know how could i achieve this .. any help is much appreciated , TIA

score 3 · Accepted Answer · answered Jun 04 '20 at 06:47

3

I think you are looking for align-items:

.sapMText {
  display: flex;
  box-sizing: border-box;
  writing-mode: vertical-rl;
  width: 200px;
  border: 1px solid black;
  line-height: normal;
  align-items: center;
  cursor: text;
}

answered Jun 04 '20 at 06:47

c0deNinja

3,956
1
29
45

Thanks mate , actually i have tried align-items but the thing is display: has inline-block overrided by other css , now changing to flex did the trick :) – KcH Jun 04 '20 at 07:09
For smaller text , how could i align it vertically center mate ? – KcH Jun 04 '20 at 07:11
1

To center vertically just add justify-content: center like you had before. – c0deNinja Jun 04 '20 at 07:19

score 1 · Answer 2 · answered Jun 04 '20 at 06:49

1

Put text in span tag <span id="text">text vertical ...</span> and give following style to it :

    #text {
writing-mode : vertical-rl;
margin-left: 50%;}

answered Jun 04 '20 at 06:49

Amirmasud

21
5

How to align text center in a Box which (text) is Vertical -rl aligned

2 Answers2

Linked