bootstrap当中，实现一些常用的元素居中

xiaoxiao2021-02-28 69

在 bootstrap当中，实现居中，咱们可以大体分3类：

文本内容居中：利用bootstrap自带CSS样式表当中的 text-center 样式来实现。

代码实现

注意，此处引用了

图片居中：利用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" 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>  </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" 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> </div> </div> </div> </body> </html>

代码解释：

设定目标所占的列数为6列，偏移数为3相当于 3,6,3 的格式呈现，也即实现了居中表示

参考图片：

转载请注明原文地址: https://www.6miu.com/read-71552.html

技术

最新回复(0)

bootstrap当中，实现一些常用的元素居中

文本内容居中：利用bootstrap自带CSS样式表当中 的 text-center 样式来实现。

图片居中：利用bootstrap自带CSS样式表当中 的 center-block 样式来实现。

其他类型元素居中：利用bootstrap列偏移的概念。

列偏移：使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用* 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

技术

文本内容居中：利用bootstrap自带CSS样式表当中的 text-center 样式来实现。

图片居中：利用bootstrap自带CSS样式表当中的 center-block 样式来实现。