I'm working on a layout with 4 columns, and I want the first 3 columns to display text vertically. However, I'm having trouble aligning the text in the center of the column. Even after using justify-content and align-items properties, the text is still positioned to the right instead of the center. Can someone help me fix this issue?
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
}
.forAll{
height: 100vh;
display: flex;
justfiy-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
line-height: 10px;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 10px;
line-height: 5px;
white-space: nowrap;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="no-gutters">
<div class="fluid-container d-flex flex-row-reverse">
<div class="container col-xl-9 col-9 col1 forAll bg-primary"></div>
<div class="container col-xl-1 col-1 col2 forAll bg-warning">
<h1 class="verticalOption"><a href="#">Sample Text</a></h1>
</div>
<div class="container col-xl-1 col-1 col3 forAll bg-danger">
<h1 class="verticalOption"><a href="#">Sample Text</a></h1>
</div>
<div class="container col-xl-1 col-1 col4 forAll bg-success">
<h1 class="verticalOption"><a href="#">Sample Text</a></h1>
</div>
</div>
</div>
</body>