/* Styles for alignment */
.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>I have been attempting to center align the text "hello" within its parent div but so far have had no success.
Could someone help me with aligning the text in the middle of its parent div?
<div class="floatsidebar">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">hello</div>
</div>
</div>