从上到下垂直对齐HTML5 CSS3

时间:2016-06-02 04:36:17

标签: javascript css html5 css3 multilingual

我有一个多语言网页。需要在页面上的按钮上显示标签。我使用以下CSS:

HTML:

<button class="btn btn-primary topdown-button">
    <div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
    <div>Basic 2</div>
</button>

CSS:

.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    vertical-align: top;
    display:block;
}
.topdown-button div{  
    text-transform: uppercase;
    vertical-align:top;
    font-size:18px;
    min-height: 148px;
    position:relative;
    text-align:left;
    -ms-writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl; 
    -o-writing-mode: vertical-rl;        
    writing-mode: vertical-rl;
    text-transform:uppercase;    
    font-size-adjust:0.5;
}

所以输出是这样的:

enter image description here

日文字符根据需要完美显示,但字母和数字不是,我希望BASIC2像日文字符一样

B
A
S
I
C
2

我怎样才能做到这一点?

编辑说明: 我使用相同的逻辑来转换我的文字,但是如果你看日文字符就会顺利转换,而正常的字母字符往往“旋转”我不想轮换英文字符,为什么不能显示与日文字符相同。

3 个答案:

答案 0 :(得分:2)

更新

以下示例跨浏览器工作,text-orientation还没有(还)。

最简单的就是这样,使用<br>,手动添加或使用脚本。

&#13;
&#13;
var elems = document.querySelectorAll('.test div');
for (var i = 0; i < elems.length; i++) {
  elems[i].innerHTML = elems[i].textContent.split('').join('<br>')
}
&#13;
.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    vertical-align: top;
    display: inline-block;
}
.topdown-button div{  
    text-transform: uppercase;
    vertical-align:top;
    font-size:18px;
    min-height: 148px;
    position:relative;
    text-align:center;
    text-transform:uppercase;    
    font-size-adjust:0.5;
}

.divider{
    border-top: 1px solid;
    padding: 10px 0;
    margin-top: 10px;
}
&#13;
<button class="btn btn-primary topdown-button">
  <div>お<br>客<br>様</div>
</button>
<button class="btn btn-primary topdown-button">
  <div>B<br>a<br>s<br>i<br>c<br>2</div>
</button>

<div class="divider">Sample using script</div>

<button class="btn btn-primary topdown-button test">
  <div>お客様</div>
</button>
<button class="btn btn-primary topdown-button test">
  <div>Basic2</div>
</button>  
&#13;
&#13;
&#13;

2:替代方案,使用word-break

&#13;
&#13;
.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    vertical-align: top;
    display:block;
    text-align: center;
}
.topdown-button div{  
    text-transform: uppercase;
    font-size:18px;
    min-height: 148px;
    position:relative;
    text-align:center;
    margin: 0 auto;
    word-break: break-all;
    width: 12px;
}
&#13;
<button class="btn btn-primary topdown-button">
    <div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
    <div>Basic2</div>
</button>
&#13;
&#13;
&#13;

答案 1 :(得分:2)

使用text-orientation: upright;这将解决问题。

.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    vertical-align: top;
    display:block;
}
.topdown-button div{  
    text-transform: uppercase;
    vertical-align:top;
    font-size:18px;
    min-height: 148px;
    position:relative;
    text-align:left;
    -ms-writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl; 
    -o-writing-mode: vertical-rl;        
    writing-mode: vertical-rl;
    text-transform:uppercase;    
    font-size-adjust:0.5;
    text-orientation: upright;
}
<button class="btn btn-primary topdown-button">
    <div>お客様</div>
</button>
<button class="btn btn-primary topdown-button">
    <div>Basic 2</div>
</button>

答案 2 :(得分:0)

你可以利用flexbox让你看起来更干净。看这个pen

<强> HTML

<button class="btn btn-primary topdown-button">
    <div>お</div>
    <div>客</div>
    <div>様</div>
</button>
<button class="btn btn-primary topdown-button">
    <div>B</div>
    <div>A</div>
    <div>S</div>
    <div>I</div>
    <div>C</div>
    <br>
    <div>2</div>
</button>

<强> CSS

.topdown-button{    
    max-height: 150px;
    min-height: 150px;
    width: 60px;
    border: 3px solid navy;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.topdown-button div{  
    text-transform: uppercase;
    font-size:18px;
 }