<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>已经水平居中了，如何让它垂直居中？
-
等级
本版专家分：0结帖率 71.43% -
<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>已经水平居中了，如何让它垂直居中？展开阅读全文
-
等级
本版专家分：21362勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
优秀版主
2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主
-
- 蓝花 2015年7月 Web 开发大版内专家分月排行榜第三
-
-
可以使用line-height。你试一下
-
等级
本版专家分：21362勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
优秀版主
2015年8月优秀小版主
2015年5月优秀小版主
2015年4月html5优秀版主
-
- 蓝花 2015年7月 Web 开发大版内专家分月排行榜第三
-
-
等级
本版专家分：0勋章
-
- GitHub 绑定GitHub第三方账户获取
-
-
line-height貌似实现不了。
用绝对定位吧。
给div个position:relative;
给button个：position:absolute;top:50%;margin-top:-button的高的一半。
-
等级
本版专家分：717 -
<!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>
-
等级
本版专家分：55
-
按钮居中个人认为在实际布局中没有这样做的；
这种不知道高度的宽度的可以用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");
});
-
等级
本版专家分：93
-
水平垂直居中：
<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>
-
等级
本版专家分：0 -
用table把标签居中就行了，注意设置margin和padding为0.
- div中的button如何垂直居中
除了margin-top目前没有找到任何合适的方式，若有大佬路过，请指教！
- CSS 将两个button按钮垂直+水平居中
CSS 将button按钮垂直+水平居中 参考文章：CSS实现垂直居中的5种方法 具体效果如图： 这个方法使用了一个 position:absolute，有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0; 。但是因为它有固定高度...
- bootstrap 如何让div内部垂直居中？
选中要居中的元素，然后设置其css属性：transform: translateY(50%); 代码： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta ...
- button 垂直、水平居中
<... <head> ...#div1 { width:100px; height:100px; border:1px black solid; text-align: center; } #div2 { width:100px; height:100px; border:1px black solid; displ...
- 如何让你的html button本身居中？------用center或者div的align属性
如何让你的html button本身居中呢？ 这个很好找思路， 在其父标签中设置居中属性啊， 如下： <html> <body> <center><button onClick="myClick()"&...
- css设置按钮竖直方向居中_CSS中怎么设置元素水平垂直居中？
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐。text-align与vertical-align虽然都是设置元素内部对齐方式的，但两者的用法还是有略微不同的。在讨论这两者的用法之前，我们首先需要了解...
- bootstrap 页面垂直居中_bootstrap4如何实现div的水平居中以及垂直居中
bootstrap是一款十分流行的前端组件库，我们在制作模板的时候，使用bootstrap会提高工作效率，减少自己写css样式的麻烦。鲶鱼CMS系统的官方主题大部分是使用bootstrap来制作的，当然也有少部分是使用其他前端框架...
- 一个div中多个元素垂直居中的一种解决办法
有多个元素需要垂直居中排列时，尝试了很多方法，总结一下觉得用flex的布局是最方便的。 目标实现： <div id="findclass" class="flexbox"> <div> </div> <ul > <li >查找班级&...
- div内容垂直居中对齐
css垂直居中属性设置vertical-align: middle对div不起作用，例如： DIV垂直居中对齐 * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } body {text-align: center; vertical-...
- css 样式 两个button 在一个较大的div中在水平方向和垂直方向都居中
水平居中：设置div的css样式为： text-align: center; 垂直居中：设置div的css样式为： display:flex; justify-content:center; align-items:center; 忘记从哪看到的了，大家将就用吧...
- 使输入框组在div中垂直居中
div class="input-group" style="width: 100%;height:70%;display:flex;justify-content:center;align-items:center;"> <input type="text" class="form-control" placeholder="搜索音乐"> <...
- 如何让你的html button本身居中？------用center或者div的align属性吧
分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！ ...
- bootstrap的div中的元素不能垂直居中的问题
https://www.zhihu.com/question/45608967这篇知乎解决了这个问题 在div中的子元素中添加 style="position:relative;top:25%;" 即可
- bootstrap div垂直居中+水平居中保持响应式
引入bootstrap4 css文件，只在...垂直居中：为需要垂直居中的div新建如下样式 .col-center-block { position: absolute; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50...
- div适应屏幕垂直居中的多种解决方案
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;font-size: 20px} /*...
- css设置div垂直居中
一开始想着直接对div用margin-top:50%就行了，但不知道为什么会移到很下面，margin-top:12.5%才刚好居中，这个问题暂时还没有解决。 这里介绍的方法是使用top和transform来实现div的一个居中。 html文件 <%@ page...
- DIV内容垂直居中
<style> #wrapper { display: table; width: 100%; height: 100%; background: #000; margin: 0 auto; color: red; } #cell { display: table-cell; vertical-align: middle;...g...
- html中div如何水平和垂直居中的几种css方法代码
一、记录下几种盒子居中的方法： 1、margin固定宽高居中； 2、负margin居中； 3、绝对定位居中； 4、table-cell居中； ...8、button居中。 二、代码演示(html使用同一个Demo)： html Demo：
- 中文字，文本框，button按钮垂直居中对齐方法
关键，文字要包含在label标签中，并设置行高，否则文字会与文本框的顶 ...button中文字垂直居中，要设置高和行高，行高要小于高。 <html><head><style type='text/css'>LABEL{LINE-HEIGHT: 20p...
- Bootstrap模态框如何垂直居中？
先上效果图 就是一个点击弹窗先上jquery代码 //模态框垂直居中 function centerModals() { $('.modal').each( function(i) { var $clone = $(this).clone().css('display', 'block')
- Button居中|水平居中|垂直居中（总结）
...- 鉴于各位前辈都有关于居中的示例，今天小弟在这结合自己的理解...- 居中呢，这里分两种不同布局方式的居中！分别是 LinearLayout 和RelativeLayout。 - 首先说的是LinearLayout布局下的居中：直接贴源码
- 使用button标签让文字垂直水平居中
关于让文字或子元素模块在父级容器里垂直居中的问题我在网上查看了很多方法都不太如意，现在分享下如何使用button标签让文字垂直水平居中。 直接上代码： *{margin: 0;padding: 0;} .fl{ float:left; margin-right:...
- div高度设为百分比垂直居中问题
.time { display: table-cell; vertical-align: middle; height: 100%; width: 50%; text-align: left; } .function_btn { ...
- 图片快速居中在div中
兼容IE6.IE7.IE8的图片在div中快速水平垂直居中(包括固定div的宽高和不定宽高两种情况)
- 如何让你的html button本身居中 ------用center或者div的align属性吧
如何让你的html button本身居中 ------用center或者div的align属性吧
- h5文字垂直居中_CSS中居中对齐元素的方法
元素中的所有文字居中对齐。p inline-block元素常见的inline-block对象是<img>, <span>。inline-block元素在默认设置中和inline元素一样，是可以在一行中连续排列的。令inline-block元素居中的第一步是...
- 2019美赛ABCDEF题题目（附C题数据）
2019美赛题目，完全是从官网下载，无翻译，可使用有道软件翻译浏览
- Java初级从入门到精通
课程分为：J2SE 基础阶段，中级阶段，阶段; 课间会讲解一些小程序的开发：如：猜拳游戏,模拟银行柜员机程序，退休金结算程序等.
- python爬虫20个案例
讲诉python爬虫的20个案例 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
- 2020年美赛优秀论文集.zip
2020年美赛优秀论文集，论文为完整版，包含附录，可以上手实操，不过全为英文，推荐结合CopyTranslator阅读：https://copytranslator.github.io/