Vertical Text text alignment in bootstraps column-CodePudding

                                <div >
                                    <div >
                                        <div >
                                            <p style="  writing-mode: vertical-rl;  text-align: center;  transform:scale(-1);">Total Number of Correct and Wrong Number</p>
                                        </div>
                                        <div >
                                            <div  style="height: 400px">
                                                <canvas id="{{ answer.id }}_barChart" ></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

CodePudding user response：

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 >

check below.

.container{
  background-color:aqua;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div >
  <div >
    <div >
      <p style="  writing-mode: vertical-rl;  transform:scale(-1);" >
        Total Number of Correct and Wrong Number
      </p>
    </div>
    <div >
      <div  style="height: 400px">
        Your Chart.
      </div>
    </div>
  </div>
</div>