如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢?
需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/common/jsplib.jsp" %>
<%
response.setHeader("Cache-Control", "no-store");
response.setHeader("Pragma", "no-cache");
response.setDateHeader("Expires", 0);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body style="text-align:center">
<div data-role="page" id="page1" data-theme="d">
<div data-role="header">
<h1>
jQuery Mobile Example
</h1>
</div>
<div role="main" class="ui-content">
<a href="#dialogPage" data-rel="dialog">Open dialog</a>
<table style="margin: 0 auto">
<tr><td align="center">
<a href="#" data-role="button" id="dh">按钮1</a>
</td></tr>
<tr><td align="center">
<a href="#" data-role="button" id="dh2">按钮2</a>
</td></tr>
</table>
</div>
<div data-role="footer">
<h2></h2>
</div>
</div>
<div data-role="page" id="dialogPage">
<div data-role="header">
<h2>
Dialog
</h2>
</div>
<div role="main" class="ui-content">
<p>
I am a dialog
</p>
</div>
</div>
<script type="text/javascript">
$.mobile.changePage( "path/to/dialog.html", { role: "dialog" } );
</script>
</body>
</html>