how to align text in center of the div of vertical align text

Question

/* Styles go here */

.floatsidebar {
  height: 100%;
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 100%) rotate(-90deg);
  transform-origin: 0 0;
  font-size: 19px;
  color: grey;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.sidebarmain:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.container-design {
  min-height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid grey;
}

.sidebarmain:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 500px;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

  <div class="floatsidebar">
    <div class="sidebarmain ui-widget-header">
      <div class="vertical-text">hello</div>
    </div>
  </div>
</body>

</html>

What I am trying to do is to align the hello text in the middle of the div but no success.

How to align the text in center of its parent div?

<div class="floatsidebar">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text">hello</div>
  </div>
</div>

Pete · Accepted Answer · 2018-04-23T10:08:54.630

Change your transform to 50% instead of 100% and add a span that can be moved back half it's own width

/* Styles go here */


.floatsidebar {
  height: 100%;
  float: left;
  overflow: hidden;
  width: 30px;
  line-height: 1.5;
}

.vertical-text {
  height: 100%;
  display: inline-block;
  white-space: nowrap;
  transform: translate(0, 50%) rotate(-90deg);  /* change this */
  transform-origin: 0 0;
  font-size: 19px;
  color: grey;
}

.vertical-text:after {
  content: "...";
  float: left;
  margin-top: 100%;
}

.vertical-text > span {                        /* add a span for true centring */
  transform: translateX(-50%);
  display: inline-block;
  max-width: 500px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow:ellipsis;
  padding: 0 0.5em;
  box-sizing:border-box;
}

.sidebarmain:hover {
  background: linear-gradient(to right, white, #a6a6a6)
}

.container-design {
  min-height: 100%;
  background: white;
  box-sizing: border-box;
  padding: 8px;
  border: 1px solid grey;
}

.sidebarmain:active {
  background: linear-gradient(to right, white, #989898)
}

.sidebarmain {
  cursor: pointer;
  border: 1px solid grey;
  box-sizing: border-box;
  height: 500px;
  background: linear-gradient(to right, white, lightgrey);
  border-radius: 2px;
}

<div class="floatsidebar">
  <div class="sidebarmain ui-widget-header">
    <div class="vertical-text"><span>a brown fox quick jump over the lazy dog a brown fox quick jump over the lazy dog</span></div>
  </div>
</div>

what if there is large text???suppose (a brown fox quick jump over the lazy dog) it will start from the middle... but it should start from the bottom.........this condition should also be satisfied.. — Aman, Apr 23 '18 at 09:59
Make up your mind do you want it to be centred or start from the bottom? You can't have both — Pete, Apr 23 '18 at 10:01
thanks it works.. still dont know how its perfectly working for both... with span..span is for both - little text and large text then how it is differentiating? — Aman, Apr 23 '18 at 10:26
I set the max width of the span to 500px (the width of the bar) so it cuts off any extra words meaning the longer text will always start from the beginning of the line — Pete, Apr 23 '18 at 10:29

score 0 · Answer 2 · answered Apr 23 '18 at 09:24

0

Simply use flexbox

.sidebarmain {
    display: flex;
    justify-content: center;
    align-items: center;
}

answered Apr 23 '18 at 09:24

Jozef Cipa

2,133
3
15
29

how to align text in center of the div of vertical align text

2 Answers2