div里的button如何垂直居中?

POPLX_杀手 2015-03-18 11:52:55
<div style="text-align:center; width:100%;height:100%;margin:0px; " >
<button style="font-size:2em; width: 70%;height: 10%;background-color: red" class=" ub-ac bc-text-head bc-btn " onclick="setInfo()">支付</button>
</div>

这里的<button>已经水平居中了,如何让它垂直居中?
...全文
69002 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
「已注销」 2015-05-24
  • 打赏
  • 举报
回复
用table把标签居中就行了,注意设置margin和padding为0.
神经质女孩 2015-03-19
  • 打赏
  • 举报
回复
水平垂直居中: <div style=" width:100%;height:100%;margin:0px;position:relative; " > <button style="font-size:2em; width: 70%;height: 10%;background-color: red;position:absolute;top:50%;left:50%;margin:-5% 0 0 -35%;" class=" ub-ac bc-text-head bc-btn " onclick="setInfo()">支付</button> </div>
sxfgen 2015-03-19
  • 打赏
  • 举报
回复
按钮居中个人认为在实际布局中没有这样做的; 这种不知道高度的宽度的可以用jquery计算赋值
<div class="divheight" style="text-align:center; width:100%;height:100%;margin:0px; "  >     
         <button style="font-size:2em; width: 70%;height: 10%;background-color: red" class="  ub-ac bc-text-head  bc-btn " onclick="setInfo()">支付</button>
         </div>  
获取class为divheight的高度:var divgd=$(".divheight").height(); $(".divheight").css("line-height",divgd+"px"); $(function () { var divgd=$(".divheight").height(); $(".divheight").css("line-height",divgd+"px"); });
ayayad 2015-03-18
  • 打赏
  • 举报
回复

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
<div style="text-align:center;height:50px;line-height:50px;background:red;"><button style="vertical-align:middle;">支付</button></div>
</body>
</html>
注意<!doctype html>
honpery 2015-03-18
  • 打赏
  • 举报
回复
line-height貌似实现不了。 用绝对定位吧。 给div个position:relative; 给button个:position:absolute;top:50%;margin-top:-button的高的一半。
业余草 2015-03-18
  • 打赏
  • 举报
回复
业余草 2015-03-18
  • 打赏
  • 举报
回复
可以使用line-height。你试一下

61,129

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧