文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在引导中正确居中旋转(90)的文本col md-1

问如何在引导中正确居中旋转(90)的文本col md-1
EN

Stack Overflow用户

提问于 2015-12-27 03:43:13

回答 2查看 98关注 0票数 3

嗨，我正在玩一个布局，我想让它看起来像一个带有侧栏的档案。我用bootstrap元素来组织它-->一个带有col-10 col-offset-1的容器，以及一个包含侧边标签元素的col-1容器。

我发现了一些使用margin-top、padding-top和translateY() of the .vertical-text (sideTab中的段落元素)的CSS解决方案。然而，我的问题是，我希望单词在制表符中正确居中，而不考虑它的长度--我已经尝试了文本对齐，并将沿着该路线继续，但尚未找到令人满意的解决方案。

https://jsfiddle.net/nacmonad/2dutL3v2/11/

$(document).ready(function() {

  $('.sideTab').click(function() {

    var tab_id = $('p', this).attr('id');
    console.log(tab_id);
    $('.sideTab').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

})

  #content {
    background-color: #669966;
    height: auto;
    /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; */
    color: #efefef;
    margin-top: 10px;
    height: 320px;
  }
  .tabHolder {
    margin-top: 10px;
    margin-left: 0px;
    width: 35px;
  }
  .sideTab {
    background-color: #666666;
    width: 35px;
    height: 80px;
    border-radius: 0px 15px 15px 0px;
    color: #efefef;
  }
  .sideTab.hover {
    background-color: #669966;
    color: #efefef;
  }
  .sideTab.current {
    background-color: #669966;
    color: #ffffff;
  }

  /*help here prrrz*/
  .vertical-text {
    transform: rotate(90deg) translate(50%, 50%);
    transform-origin: 50% 50% 0;
    vertical-align: middle;
  }
  .vertical-text:hover {
    color: #ffffff;
  }
  .nopadding {
    padding: 0 !important;
    margin: 10 0 0 0 !important;
  }
  .tab-content {
    display: none;
    background: #ededed;
    padding: 15px;
  }
  .tab-content.current {
    display: inherit;
  }
  .current {
    background-color: #669966;
  }

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Foldertabs</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <div id="content" class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1">
      <p id="tab-1" class="tab-content current">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
        nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
      <p id="tab-2" class="tab-content">Vix exerci mediocritatem in, debet voluptaria interesset mei cu. His quot tation ea, eu discere insolens incorrupte vis. Quot prodesset consequuntur nec ex, quo in tantas voluptua appellantur. Postulant appellantur an vix, te qui graeco option consequuntur.
        Malorum ocurreret contentiones et sed, pro id dolorem percipitur cotidieque.</p>
      <p id="tab-3" class="tab-content">Lorem ipsum dolor sit amet, munere tamquam mediocritatem et has. No vim hinc cetero scaevola, ei est ignota salutandi constituam. Qui in nusquam forensibus, eos dolore splendide democritum et, an ipsum legendos vel. Ut populo utroque pro</p>
      <p id="tab-4" class="tab-content">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
        nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
    </div>

    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 tabHolder nopadding">
      <div class="sideTab">
        <p id="tab-1" class="vertical-text">home</p>
      </div>
      <div class="sideTab">
        <p id="tab-2" class="vertical-text">bl.ocks</p>
      </div>
      <div class="sideTab">
        <p id="tab-3" class="vertical-text">about</p>
      </div>
      <div class="sideTab">
        <p id="tab-4" class="vertical-text">contact</p>
      </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <script>
    $(document).ready(function() {

      $('.sideTab').click(function() {

        var tab_id = $('p', this).attr('id');
        console.log(tab_id);
        $('.sideTab').removeClass('current');
        $('.tab-content').removeClass('current');

        $(this).addClass('current');
        $("#" + tab_id).addClass('current');
      })

    })
  </script>
</body>

</html>

谁能指出一个我忽略的显而易见的解决方案？

jquery

html

css

twitter-bootstrap

回答 2

Stack Overflow用户

发布于 2015-12-27 04:41:53

.vertical-text {
    -webkit-transform: translate3d(-50%, -50%, 0) rotate(90deg);
    -ms-transform: translate3d(-50%, -50%, 0) rotate(90deg);
    transform: translate3d(-50%, -50%, 0) rotate(90deg);
    top: 50%;
    left: 50%;
    position: absolute;
    padding: 0;
    margin: 0;
}
.sideTab {
    position: relative;
}

Updated fiddle。

票数 2

Stack Overflow用户

发布于 2015-12-27 04:46:55

这里有一个解决方案，它将避免许多静态像素值，而是使用强大的flex来对齐项目并为元素分配相等的尺寸。

$(document).ready(function() {

  $('.sideTab').click(function() {

    var tab_id = $('p', this).attr('id');
    console.log(tab_id);
    $('.sideTab').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

})

#content {
  background-color: #669966;
  height: auto;
  /*font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; */
  color: #efefef;
  height: 320px;
  margin-left: 0;
}
.tabHolder {
  flex-direction: column;
  display: flex;
}
.tabHolder.current {} .sideTab {
  background-color: #666666;
  border-radius: 0px 15px 15px 0px;
  color: #efefef;
  align-items: center;
  flex: 1;
}
.sideTab:hover {
  background-color: #669966;
  color: #ffffff;
  border-radius: 0px 15px 15px 0px;
}
.vertical-text {
  transform: rotate(90deg);
}
.nopadding {
  padding: 0 !important;
}
.tab-content {
  display: none;
  background: #ededed;
  padding: 15px;
}
.tab-content.current {
  display: inherit;
}
.current {
  background-color: #669966;
}
.flex {
  display: flex;
}
.margin-0 {
  margin: 0 !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container flex">
  <div id="content" class="col-xs-10 col-xs-offset-1 col-sm-10 col-sm-offset-1 col-md-10 col-md-offset-1 col-lg-10 col-lg-offset-1 flex">
    <p id="tab-1" class="tab-content current">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
      nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
    <p id="tab-2" class="tab-content">Vix exerci mediocritatem in, debet voluptaria interesset mei cu. His quot tation ea, eu discere insolens incorrupte vis. Quot prodesset consequuntur nec ex, quo in tantas voluptua appellantur. Postulant appellantur an vix, te qui graeco option consequuntur.
      Malorum ocurreret contentiones et sed, pro id dolorem percipitur cotidieque.</p>
    <p id="tab-3" class="tab-content">Lorem ipsum dolor sit amet, munere tamquam mediocritatem et has. No vim hinc cetero scaevola, ei est ignota salutandi constituam. Qui in nusquam forensibus, eos dolore splendide democritum et, an ipsum legendos vel. Ut populo utroque pro</p>
    <p id="tab-4" class="tab-content">Vocent meliore ea qui, ne solum accommodare vim, eam id elit eirmod invenire. Ius integre singulis nominati eu, habeo consequat argumentum eos ea. Has tempor populo denique cu, ex pro sanctus maiestatis argumentum. Mea tation prompta assentior an,
      nam soluta copiosae legendos et, propriae adolescens dissentiunt et vim. Has ad timeam euismod definitiones, doctus invidunt ex usu, et gloriatur adversarium qui. No libris docendi sensibus pro.</p>
  </div>

  <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 tabHolder nopadding">
    <div class="sideTab current flex">
      <p id="tab-1" style="width:47px;" class="vertical-text margin-0">home</p>
    </div>
    <div class="sideTab flex">
      <p id="tab-2" style="width:47px;" class="vertical-text margin-0">bl.ocks</p>
    </div>
    <div class="sideTab flex">
      <p id="tab-3" style="width:47px;" class="vertical-text margin-0">about</p>
    </div>
    <div class="sideTab flex">
      <p id="tab-4" style="width:47px;" class="vertical-text margin-0">contact</p>
    </div>
  </div>
</div>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

正如你所看到的，我删除了许多你用来给出高度和宽度的像素值。更干净的解决方案！令人惊讶的是，这个令人敬畏的属性的browser support很好。

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/34474623

复制

相似问题

问如何在引导中正确居中旋转(90)的文本col md-1
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导中正确居中旋转(90)的文本col md-1EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在引导中正确居中旋转(90)的文本col md-1
EN