CODEWITHSUNDEEP
javascripthtmlcssreactjs
user966123
user966123

Reputation: 941

Aligning a text div inside another div vertically

So I have the following things: 1. A text box = tb 2. A preview kind of div 3. A label which will hold the text typed in text box updated as the user types the text in text box.

I am able to update the text on the label as the user types text inside the text box using react callbacks.

The thing that I am not able to do is: I need to keep the label aligned to the center of its parent div vertically and horizontally it needs to be aligned at 0 position.

So as the user types instead of the label size just increasing in one direction, it should increase in both directions, keeling the centers of the label and its parent div aligned.

I tried to play around with transform:rotate(90deg), flex, transform-origin, align-items etc and nothing seem to give me what i want.

parent div CSS:

const BiggerDiv = styled.div`
position: relative;
display: flex`;

label styling: 

const LabelDiv = styled.div`
display: flex;
align-items: center;
justify-content:center;
alignContent: 'center';
transform: 'rotateY(90deg)';
transform-origin: left bottom;
left: 0%;
position: relative;`

React function returning the view: 

<BiggerDiv>
  <LabelDiv>
     SomeText
   </LabelDiv>
</BiggerDiv>

What I want the label has less text: label with less text

label with more text yet the image label's center is aligned with that of parent div.

enter image description here

Upvotes: 2

Views: 82

Answers (2)

bgaze
bgaze

Reputation: 1000

No need for rotation :

.parent {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 600px;
  height: 400px;
  background: #ddd;
}

.inner {
  writing-mode: vertical-rl;
  text-orientation: upright;
}
<div class="parent">
    <div class="inner">SOME TEXT</div>
</div>

Upvotes: 0

Julian W.
Julian W.

Reputation: 1571

You can do it by following css.

.parent {
  height: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-orientation: upright;
  writing-mode: vertical-lr;
  padding: 10px;
  border: 1px solid red;
}
<div class="parent">
  LONG TEXT HERE
</div>

Upvotes: 2

Related Questions