bootstrap当中，实现一些常用的元素居中
在 bootstrap当中，实现居中，咱们可以大体分3类：
-
文本内容居中：利用bootstrap自带CSS样式表当中 的 text-center 样式来实现。
代码实现
注意，此处引用了
<link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 't1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
</head>
<body>
<div class="container">
<div class="row" >
<div class="text-center ">
<p>文本内容居中：利用bootstrap自带CSS样式表当中 的 text-center 样式来实现。 </p>
</div>
</div>
</div>
</body>
</html>
参考图片：
-
图片居中：利用bootstrap自带CSS样式表当中 的 center-block 样式来实现。
代码实现：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 't1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
</head>
<body>
<div class="container">
<div class="row" >
<img class="center-block" alt="" src="img/1.jpg">
</div> <!-- /input-group -->
</div>
</body>
</html>
参考图片
-
其他类型元素居中：利用bootstrap列偏移的概念。
在实现其他类型的元素居中时，咱们可以用到bootstrap当中网格的概念：首先网格最多是显示12列，多余的就会切换到下一行，咱们要设定居中，意味着，要设置内容所占网格的大小，并且利用列偏移
列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用* 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将
.col-md-4 元素向右侧偏移了4个列（column）的宽度。
代码实现：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 't1.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="/baidu/css/bootstrap.min.css"type="text/css"/>
</head>
<body>
<div class="container">
<div class="row" >
<div class="col-md-6 col-md-offset-3">
<div class="input-group" display：block;margin：0 auto;>
<input type="text" class="form-control " placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-info btn-search " type="button" >百度一下</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</div>
</body>
</html>
代码解释：
<div class="col-md-6 col-md-offset-3">
设定目标所占的列数为6列，偏移数为3相当于 3,6,3 的格式呈现，也即实现了居中表示
参考图片：
