Bootstrap自适应居中问题

>一段Bootstrap的自适应的垂直居中登录框代码

使用中发现一个问题，当这段代码加上H5的头的时候，

<!DOCTYPE html>

垂直居中的效果就消失了。

<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>用户登录</title><!-- Bootstrap 核心 CSS 文件 --><link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"><style>/*web background*/.container{display:table;height:100%;}.row{display: table-cell;vertical-align: middle;}/* centered columns styles */.row-centered {text-align:center;}.col-centered {display:inline-block;float:none;text-align:left;margin-right:-4px;}</style></head><body><div class="container"><div class="row row-centered"><div class="well col-md-6 col-centered"><h2>欢迎登录</h2><form:form action="/login" method="post" role="form"><div class="input-group input-group-md"><span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-user" aria-hidden="true"></i></span><input type="text" class="form-control" id="userid" name="userid" placeholder="请输入用户ID"/></div><div class="input-group input-group-md"><span class="input-group-addon" id="sizing-addon1"><i class="glyphicon glyphicon-lock"></i></span><input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"/></div><br/><button type="submit" class="btn btn-success btn-block">登录</button></form:form></div></div></div><!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script></body>
</html>

>解决方案

<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --><!--css--><link rel="stylesheet" href="css/bootstrap.min.css" /><!--jq--><script type="text/javascript" src="js/jquery-1.11.0.js"></script><!--JS--><script type="text/javascript" src="js/bootstrap.min.js"></script><title>测试</title><style type="text/css">#center {position: absolute;top: 50%;-webkit-transform: translateY(-50%);-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-o-transform: translateY(-50%);transform: translateY(-50%);border: 2px solid black;}     </style></head><body><div class="col-lg-4 col-lg-offset-4  col-sm-6 col-sm-offset-3 col-xs-8 col-xs-offset-2 " id="center">内容</div></body></html>

Bootstrap自适应居中问题相关推荐

bootstrap 图片居中,bootstrap如何设置居中
该方法适用于所有品牌的电脑. Bootstrap 元素居中设置一.Bootstrap水平居中 1. 文本:class ="text-center" 2. 图片居中:class = ...
不固定个数的子元素自适应居中
今天工友提了一个需求,让固定宽度的子元素,在不确定宽度的容器内水平居中(自适应):UL 宽度不固定:LI 宽度固定,LI 是一个块.看起来还挺简单的.但大家为什么一直讨论不断.希奇,实现了一下.发现实 ...
css3绝对定位垂直居中,CSS3绝对定位自适应居中 - 米扑博客
网页前端开发中,经常会遇到让一个块状元素水平或垂直居中的情况你知道如何在自适应屏幕的情况下保持元素居中么? 元素居中这是前端开发中最常见的任务之一对于行内元素,我们可以对父元素使用 text-al ...
Bootstrap自适应
Bootstrap是基于HTML.css.javaScript开发的简洁,直观,强悍的前端开发框架,使web开发跟家快捷能制作响应式网页. bootstrap自适应: Bootstrap根据屏幕大小 ...
html表格网页自适应居中,web前端：css自适应居中方法总结
下面来看一个最简单的小案例,在浏览器窗口居中一个小盒子: 就这样一个很简单的小案例,你能够想到多少种方法来实现呢?对块元素盒子的左右居中相信大家都不陌生,{margin:auto;}就能够实现,但是对 ...
bootstrap 图片居中,浅谈Bootstrap中的垂直水平居中
本篇文章给大家介绍一下Bootstrap3和Bootstrap4的垂直水平居中.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 相关教程推荐:<bootstrap教程> ...
bootstrap 标题居中加颜色_BootStrap从基础到项目实战_第1季_03章_01_CSS样式之栅格布局...
目标目标一.理解什么是栅格布局目标二.掌握栅格布局具体应用目标三.掌握BootStrap通用CSS样式(排版.代码.代码.表单.按钮.图片.辅助类.响应式工具) 内容一.BootStrap全局 ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
红色Bootstrap自适应帝国cms7.5会员中心模板
介绍: 一款采用Bootstrap v3框架开发的自适应帝国cms7.5会员中心模板,红色风格,UTF-8编码的. 网络收集没测试,自行研究,没有完全修改,有部分模板未修改,有能力的同学可以自己完善. ...

Bootstrap自适应居中问题

Bootstrap自适应居中问题相关推荐

最新文章

热门文章