如何让按钮里的文字居中竖排

最新推荐文章于 2025-02-12 17:21:53 发布

转载最新推荐文章于 2025-02-12 17:21:53 发布 · 5.9k 阅读

标签

#button #input

收录于

HTML/XHTML/CSS 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了三种实现竖排文字的方法。方法一使用button和span标签配合特定样式实现。方法二展示了通过input标签设置竖排显示古诗的效果。方法三则是在button中加入图片来触发弹窗提示。

来自经典论坛http://www.blueidea.com/bbs/newsdetail.asp?id=1841652

方法一
<button style="width:50px; height:200px;">
<span style="color:red; font:11pt 宋体; writing-mode:tb-rl">竖排文字</span>
</button>

方法二

<br><br><br>
<center>
<input type=submit name=submit value="关关雎鸠，在河之洲；窈窕淑女，君子好逑。"style="color:#11ee19;writing-mode:tb-rl; width:3cm;border:red 12px groove">

方法三
<button onclick=alert("I am a button!")><img src=http://www.blueidea.com/bbs/icon/icon12.gif></button>
<button onclick=alert("I am a button!")><img src=http://www.blueidea.com/bbs/icon/icon12.gif><img src=http://www.blueidea.com/img/common/logo.gif><img src=http://www.blueidea.com/bbs/images/topic5.gif></button>