How to center rotated text in a div?

Navigation
2

Hello beloved community!

I'm rotating a p inside a div, but I can not centralize it, I'm having a hard time in css, I've tried setting a width: and height: for p, I left it as a self but it does not 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 regarding CSS, why does not it respect the size of the blue div, if it is a child?

    
asked by anonymous 02.02.2018 / 18:10

1 answer

1

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

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

See 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>
    
02.02.2018 / 18:32
All tabs appearing when updating page materialize How do I select in specific columns and continue to get a list of the entity and not an array of Object?