Question

花费了大量时间研究并尝试各种修复以在JQM中对齐“事物”（输入，图像，按钮等）中心与左对齐。似乎一个可能的“两全其美”解决方案，适应大型和小型显示器将提供一个简单的中心输入等方式，在每一侧给予一个小的余量，以便用户可以清楚地看到它们与运行它们一直到浏览器的边缘。这是我尝试完成占据90％屏幕并居中的失败尝试。它就像它在DIV中对齐的中心，但是整个DIV然后向左对齐，所以它使网左对齐。尝试了DIV命令的各种组合，此时我“分手”！ :)非常感谢任何帮助！

HTML：

<!doctype html>
<html>
<head>
<title>MyTitle</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jQuery/jquery.mobile-1.4.3.css">
<link rel="stylesheet" href="css/centerstyle.css">
<script src="jQuery/jquery-1.11.1.min.js"></script>
<script src="jQuery/jquery.mobile-1.4.3.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>Centered and with margins</h1>
</div>
<div class="center-wrapper">
<label for="UserName" class="ui-hidden-accessible">User Name:</label>
<input type="text" size="20" maxlength="30" name="UserName" placeholder="User Name">
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</body></html>

CSS：

.center-wrapper{
    text-align: center;
    width: 90%;
}
.center-wrapper * {
    margin: 0 auto;
}

Answer 1

对于jQM，你应该把所有东西都包装在data-role =＆＃34; page＆＃34; div和内容div中的内容如下：

<div data-role="page" id="page1">
    <div data-role="header">
        <h1>Centered and with margins</h1>
    </div>
    <div role="main" class="ui-content">
        <div class="center-wrapper">
            <label for="UserName" class="ui-hidden-accessible">User Name:</label>
            <input type="text" size="20" maxlength="30" name="UserName" placeholder="User Name" />
            <button>I am a button</button>
        </div>
    </div>
    <div data-role="footer">        
        <h4>Footer</h4>
    </div>
</div>

然后在CSS中你只需设置中心包装div的宽度并指定一个自动边距来居中它：

.center-wrapper{
    margin: 0 auto;
    width: 90%;
}

这是 DEMO

带边距的jQuery Mobile Center输入

1 个答案: