How to center rotated text on a div?

Asked

Viewed 76 times

2

Hello beloved community!

I’m rotating a p inside a div, but I can’t center it, I’m having enough difficulty in css, already tried to define a width: and height: for p, I left as auto, but it doesn’t work.

p.vertical
    {
      
     transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg); /* Safari/Chrome */
     -moz-transform: rotate(-90deg); /* Firefox */
     -o-transform: rotate(-90deg); /* Opera */
     -ms-transform: rotate(-90deg); /* IE 9 */
 
     font-size: 17.5px;
     font-family: Arial;
        

    }
<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
    <div style='background-color: rgb(245,245,245);  display: inline-block; 
    position: relative;
    padding-left: 150px;'> 
      <div style='background-color:blue; width: 150px; display: inline-block; float:left;    
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;'><p class='vertical'>Como centralizo esse texto baseado na altura da div azul?</p></div>
    
        <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         <div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div><div style="float:left;">
          <table border='1' style='background-color: red;'>
            <tr>
              <td>ola</td>
              <td>teste</td>
            </tr>
          </table>  
         </div>
         
    </div>
  </div>

I also have a question about the CSS, because why it does not respect the size of the blue div, if it is son?

html css html5 css3

1 answer

1


First place text-align:center; in the text.

Then put those classes in the box-blue: display: flex; justify-content: center; align-items: center;

See how it looks in the example below:

p.vertical
    {
      
     transform: rotate(-90deg);
     -webkit-transform: rotate(-90deg); /* Safari/Chrome */
     -moz-transform: rotate(-90deg); /* Firefox */
     -o-transform: rotate(-90deg); /* Opera */
     -ms-transform: rotate(-90deg); /* IE 9 */
 
     font-size: 17.5px;
     font-family: Arial;
     text-align: center;
        

    }
<div style=' display: inline-block; border-style: solid; border-color: grey; border-width: 2px; border-radius: 4px; padding: 10px;'>
                <div style='background-color: rgb(245,245,245);  display: inline-block; 
                position: relative;
                padding-left: 150px;'> 
                  <div style='background-color:blue; width: 150px; display: inline-block; float:left;    
                  position: absolute;
                  top: 0;
                  bottom: 0;
                  left: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;'>
                  
                  <p class='vertical'>Como centralizo esse texto baseado na altura da div azul?</p></div>
                

                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     <div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div><div style="float:left;">
                      <table border='1' style='background-color: red;'>
                        <tr>
                          <td>ola</td>
                          <td>teste</td>
                        </tr>
                      </table>  
                     </div>
                     
                </div>
              </div>

  • exactly that, where can I study more css? to catching when I don’t use bootstrap

  • 1

    So attached as it is, when I started didn’t have these frameworks, I learned it was in tapa haha. Dude read a lot, especially the W3C documentations, it’s not just watching video on Youtube no! Enter this site and leave by clicking and reading everything you can, study the examples, and try to copy them or apply them in other situations. To work with CSS you have to have some creativity... https://css-tricks.com/ if you need something in Portuguese, tell me. Sometimes it is worth some course tb, I state this! https://www.origamid.com/

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.