如何在bootstrap col-md-1中正确居中旋转（90）文本

Question

Hi I am playing with a layout I wanted to make it look like a dossier with sidetabs. 嗨，我正在玩一个布局，我想让它看起来像一个带有sidetabs的档案。 Am organizing it with bootstrap elements--> a container with col-10 col-offset-1 , and a sidetab container of col-1 which contains the side tab elements. 使用bootstrap元素组织它 - >具有col-10 col-offset-1容器，以及包含侧标签元素的col-1的sidetab容器。

I have found some CSS solutions using margin-top , padding-top and translateY() of the .vertical-text (a paragraph element inside the sideTab). 我找到了一些CSS解决方案，使用了.vertical-text margin-top ， padding-top和translateY() （ .vertical-text一个段落元素）。 However, my problem is that I want the word to be properly centered in the tab regardless of the length of it -- I have tried text-align, and will continue along that route but have yet to find a satisfactory solution. 但是，我的问题是我希望单词在选项卡中正确居中，无论其长度如何 - 我已尝试文本对齐，并将继续沿着该路线但尚未找到满意的解决方案。
https://jsfiddle.net/nacmonad/2dutL3v2/11/ 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>

Can anyone point out an obvious solution that I'm overlooking? 任何人都能指出一个我忽视的明显解决方案吗？

Answer 1

.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 . 更新了小提琴。

Answer 2

Here is a solution which will avoid many static pixel values and instead use the powerful flex to align items and to assign equal dimensions to elements. 这是一个解决方案，它将避免许多静态像素值，而是使用强大的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>

As you can see I have removed many pixel values which you used to give height and width. 正如您所看到的，我删除了许多用于给出高度和宽度的像素值。 Much cleaner solution !. 更清洁的解决方案！ Surprisingly the browser support for this awesome property is good. 令人惊讶的是，浏览器对这个令人敬畏的属性的支持是好的。

如何在bootstrap col-md-1中正确居中旋转（90）文本

问题描述

2 个解决方案

解决方案1
2 2015-12-26 20:41:52

解决方案2
2 2015-12-26 20:46:54

如何在bootstrap col-md-1中正确居中旋转（90）文本

问题描述

2 个解决方案

解决方案1 2 2015-12-26 20:41:52

解决方案2 2 2015-12-26 20:46:54

解决方案1
2 2015-12-26 20:41:52

解决方案2
2 2015-12-26 20:46:54