按鈕看起來整齊的垂直文本

-1

我有一個div（我想看起來像一個按鈕），我垂直顯示文本。我希望文字看起來整潔。我該怎麼做？ FIDDLE按鈕看起來整齊的垂直文本

<div id="btn-toggle-menu">Hide Menu</div>

CSS：

#btn-toggle-menu { 
     position:fixed; 
     width:10.9px; 
     line-height:25px; 
     cursor:pointer; 
     border:1px solid #333; 
     background-color:#ccc; 
     text-align:center; 
     font-weight:bold; 
     font-size:20px; 
     word-wrap: break-word; 
    }

來源

2013-09-24 Benny

定義整齊。這是編程問題的網站，而不是設計問題，所以除非您能向我們展示您想要的外觀形象，否則我們無法真正幫助您。 –

僱用設計師 – Itay

是不是「整潔」強烈oppinion爲基礎？ – Marco

嘗試使用此DEMO

<div id="btn-toggle-menu">H 
i 
d 
e 

M 
e 
n 
u 
</div>

CSS：

#btn-toggle-menu { 
     position:fixed; 
     top:0; 
     left:0; 
     width:20px; 
     cursor:pointer; 
     border:1px solid #333; 
     background-color:#ccc; 
     text-align:center; 
     white-space: pre; 
    }

來源

2013-09-24 08:44:49

我猜，你的問題就解決了。試試這個

HTML：

<div id="btn-toggle-menu"> 
    <div style="width:10px;"> 
     Hide Menu 
    </div> 
</div>

CSS：

#btn-toggle-menu { 
    position:fixed; 
    width:25px; 
    line-height:25px; 
    cursor:pointer; 
    border:1px solid #333; 
    background-color:#ccc; 
    text-align:center; 
    font-weight:bold; 
    font-size:20px; 
    word-wrap: break-word; 
    padding-left:8px; 
}

Live Demo

來源

2013-09-24 08:42:51 NaYaN

，想到的第一件事是使用寬度= 1em的（字母M的一個寬度），並在預先模式下使用的空白：

#btn-toggle-menu { 
    text-align: center; 
    width:1em; 
    word-wrap: pre; 
}

文本與中心對齊。

演示：http://jsfiddle.net/6v2Cm/5/

來源

2013-09-24 08:50:38 Belyash

按鈕看起來整齊的垂直文本

回答

相關問題