在 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 的格式呈现,也即实现了居中表示
参考图片: