'Vertical Text text alignment in bootstraps column

                                <div class="container">
                                    <div class="row">
                                        <div class="col-sm-1">
                                            <p style="  writing-mode: vertical-rl;  text-align: center;  transform:scale(-1);">Total Number of Correct and Wrong Number</p>
                                        </div>
                                        <div class="col-sm-11">
                                            <div class="row" style="height: 400px">
                                                <canvas id="{{ answer.id }}_barChart" class="bar_chart"></canvas>
                                            </div>
                                        </div>
                                    </div>

                                </div>

Above is the code for my work, i tried to make the text align to middle by put text-align:center or <center> xxx </center> , but it's still not in the middle

https://prnt.sc/m8hPkJ3N5x4v here is the image

htmlcss


Solution 1:[1]

Just add the following 3 more bootstrap classes d-flex align-items-center justify-content-center, in your heading div.

so your heading div will be <div class="col-sm-1 d-flex align-items-center justify-content-center">

check below.

.container{
  background-color:aqua;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
    <div class="col-sm-1 d-flex align-items-center justify-content-center">
      <p style="  writing-mode: vertical-rl;  transform:scale(-1);" class="align-middle">
        Total Number of Correct and Wrong Number
      </p>
    </div>
    <div class="col-sm-11">
      <div class="row" style="height: 400px">
        Your Chart.
      </div>
    </div>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Abhijeet Vadera

Related Questions