Jquery css居中和调整旋转文本的大小 我有一个网页，中间的图片大约有60%个宽。 在图片旁边，我有3个按钮，它们是旋转文本

我需要的按钮是相同的大小和间隔均匀。 我还需要3个按钮的高度与图片的高度大致相同，这意味着它们需要根据浏览器大小调整大小。 现在可以了，但我觉得很笨重

我的问题是：我现在正在使用一些CSS和Javascript来完成这项工作，但我想知道是否有更好的方法，也许是使用所有CSS？

<div id="homeTop">              

        <div id="sliderPad">
            <div class="flexslider">
              <ul class="slides">
                <li>
                  <img src="data/homeSlides/brennys.jpg">
                  <p class="flex-caption">Brenny's Motorcycle Clinic &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/aledoFireStation.jpg">
                  <p class="flex-caption">Aledo Fire Protection District &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/trueNorth.jpg">
                  <p class="flex-caption">True North &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/operationThreshold.jpg">
                  <p class="flex-caption">Operation Threshold &gt;</p>
                </li>
                <li>
                  <img src="data/homeSlides/sadler.jpg">
                  <p class="flex-caption">Sadler &gt;</p>
                </li>                       
              </ul>
            </div>      
      </div>            

        <div id="sideButtons">
          <div class="sideBtn">
            <div class="sbInside">                          
                JUST AWARDED
            </div>  
            </div>
          <div class="sideBtn">
            <div class="sbInside">                          
                UNDER CONSTRUCTION
            </div>      
            </div>
          <div class="sideBtn">
            <div class="sbInside">                          
                RECENTLY COMPLETED                  
            </div>      
            </div>              
        </div>                                                                                                

</div>

还有剧本：

<script>
    $(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() <=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>.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);                 

    }

</script>

---

我想你正在寻找这样的东西：

通过将

img

div设置为

80vh

，您只需计算一下按钮大小

按如下方式设置按钮宽度<代码>高度：计算（（80vh-20px）/3）

80vh

用于匹配图像高度，

-20px

用于计算中间的边距，您可以除以

/3

，因为有3个按钮

<script>
    $(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() <=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>.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);                 

    }

</script>

@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;           
        }           

}