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写文章

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>