title: css centering and resizing rotated text
body: <p>I have a web page with a picture scaled to about 60% wide in the middle.
  Next to the picture, I have 3 buttons, which are rotated text.</p>
  
  <p><a href="https://i.stack.imgur.com/SsI9V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SsI9V.png" alt="enter image description here"></a></p>
  
  <p>I need for the buttons to be the same size and spaced apart evenly.
  I also need the height of the 3 buttons to be about the same size as the height of the picture, which means they will need to resize with the browser size.
  This works now, but it seems very clunky to me.</p>
  
  <p>My questions is: <strong>I'm doing this now using some CSS and Javascript, but I'm wondering if there is a better way, perhaps with all CSS?</strong></p>
  
  <pre><code>&lt;div id="homeTop"&gt;              
  
          &lt;div id="sliderPad"&gt;
              &lt;div class="flexslider"&gt;
                &lt;ul class="slides"&gt;
                  &lt;li&gt;
                    &lt;img src="data/homeSlides/brennys.jpg"&gt;
                    &lt;p class="flex-caption"&gt;Brenny's Motorcycle Clinic &amp;gt;&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="data/homeSlides/aledoFireStation.jpg"&gt;
                    &lt;p class="flex-caption"&gt;Aledo Fire Protection District &amp;gt;&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="data/homeSlides/trueNorth.jpg"&gt;
                    &lt;p class="flex-caption"&gt;True North &amp;gt;&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="data/homeSlides/operationThreshold.jpg"&gt;
                    &lt;p class="flex-caption"&gt;Operation Threshold &amp;gt;&lt;/p&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;img src="data/homeSlides/sadler.jpg"&gt;
                    &lt;p class="flex-caption"&gt;Sadler &amp;gt;&lt;/p&gt;
                  &lt;/li&gt;                       
                &lt;/ul&gt;
              &lt;/div&gt;      
        &lt;/div&gt;            
  
          &lt;div id="sideButtons"&gt;
            &lt;div class="sideBtn"&gt;
              &lt;div class="sbInside"&gt;                          
                  JUST AWARDED
              &lt;/div&gt;  
              &lt;/div&gt;
            &lt;div class="sideBtn"&gt;
              &lt;div class="sbInside"&gt;                          
                  UNDER CONSTRUCTION
              &lt;/div&gt;      
              &lt;/div&gt;
            &lt;div class="sideBtn"&gt;
              &lt;div class="sbInside"&gt;                          
                  RECENTLY COMPLETED                  
              &lt;/div&gt;      
              &lt;/div&gt;              
          &lt;/div&gt;                                                                                                
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>#sideButtons{
      width:50px;
      margin-left:5%;         
      float:left;
      top:0;
      position:absolute;
      margin-top:25px;
      overflow:hidden;
  }
  
  
  .sideBtn{
      width:100%;
      background:#44616e; 
      float:left;
      height:130px;
      margin-top:10px;
      box-shadow: inset 0 0 100px #1f2d33;
      position:relative;
  }
  
  .sbInside{
    position: absolute;
    top: 35%;
    left: -35%;
      color:#f47421;  
      font-size:.6em;
      text-align:left;
  
      -webkit-transform: rotate(-90deg);
      -moz-transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      -o-transform: rotate(-90deg);
      filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);   
  }   
  </code></pre>
  
  <p>and the script:</p>
  
  <pre><code>&lt;script&gt;
      $(function(){
  
              $('.flexslider').flexslider({
                  animation: "fade",
            slideshow: true,
            slideshowSpeed: 5000
              });         
  
  
            scaleSideTabs();
  
  
              $(window).on("resize",function(){
                  scaleSideTabs();
              });     
      });
  
      // scale 3 side tabs
      function scaleSideTabs(){       
              setTimeout(function(){
                    // don't resize if in mobile mode         
                    // they will be moved to below the picture
                      if( $(window).width() &lt;=768 ){
                          $(".sideBtn").height("80px");                           
                          $(".sideBtn").each(function(){                  
                                  var os=$(this).offset();
                                  var w=$(this).width();
                                  var iw=$(this).find(".sbInside").width();                       
                                  var ls=(os.left)+(w-iw)/2;                      
                                  $(this).find(".sbInside").offset({top:os.top+30,left:ls});                      
                          });                 
                          return;
                      }  
  
                    var spacer=10;
                      var sh=$(".slides").height();
                      var she=( (sh-(3*spacer)) /3)-10;  // scale to 1/3 minus 5px space between
  
                      // set height
                      $(".sideBtn").height(she);
  
                      // set left margin of inside text
                      // resize text: font size is .7em at 133h : scale (190)         
                      $(".sideBtn").each(function(){
                          var fs=she/190;
                          if(fs&gt;.8){fs=.8;}
                          $(this).find(".sbInside").css("font-size",(fs).toString()+"em");                    
                          var os=$(this).offset();
                          $(this).find(".sbInside").offset({left:os.left+5});                         
                      });             
              },500);                 
  
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>When viewed on mobile, the 3 buttons move below the picture.</p>
  
  <pre><code>@media screen and (max-width: 768px) {
          #sideButtons{
              width:100%;
              margin-left:auto;           
              margin-right:auto;          
              float:none;
              top:auto;
              position:relative;
              margin-top:auto;
              text-align:center;
          }
  
          .sideBtn{
              width:31%;
              float:none;
              display:inline-block;
              height:80px;
              margin-top:auto;
              margin-right:5px;
          }
  
          .sbInside{
            position: absolute;
            top: 40%;
            left: auto;
              color:#f47421;  
              font-size:.6em;
              text-align:center;
              width:100%;
  
              -webkit-transform: none;
              -moz-transform: none;
              -ms-transform: none;
              -o-transform: none;
              filter: none;           
          }           
  
  }
  </code></pre>