带有边距的 jQuery Mobile Center 输入答案

【问题标题】：jQuery Mobile Center Inputs with Margins带有边距的 jQuery Mobile Center 输入
【发布时间】：2014-10-19 20:25:42
【问题描述】：

花费大量时间研究和尝试各种修复以在 JQM 中对齐“事物”（输入、图像、按钮等）中心与左侧。似乎一种可能的“两全其美”的解决方案来适应大型和小型显示器将是提供一种简单的方式来居中输入等浏览器的边缘。这是我尝试完成占据屏幕 90% 并居中的输入的失败尝试。就像它在 DIV 内对齐中心一样，但整个 DIV 然后左对齐，因此它左对齐。尝试了 DIV 顺序的各种组合，此时我“div-up”！ :) 非常感谢任何帮助！

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;
}

【问题讨论】：

这是您要找的吗？ Fiddle
是的，但是当我尝试使用 JQM 时，输入在 IE 和 Chrome 中都跨越了整个屏幕。它就像我似乎无法找到的覆盖。我可以独立于 JQM 来设计我需要的样式，但我们正在考虑集成它。所以如何集中和使用 JQM 是目标。鉴于所有其他帖子，我希望他们能尽快认识到这一点。
您是否尝试过输入元素的内联样式，或者给输入一个id 或class 名称并尝试这种方式？
奇怪的是，如果我将您的小提琴 .center-wrapper 更改为 90% 并删除输入样式，它似乎更接近，但仍然不正确，因为包括页眉/页脚在内的所有内容都是 90%。我只是希望能够控制某些 DIV 而让其他 DIV 不理会。span>
是的，尝试了内联样式，尝试了这里和其他地方的大部分线程。我发布整个 HTML 的原因是其他线程只解决一个方面，试图准确地显示正在运行的代码。我应该对结果进行屏幕截图吗？

标签： jquery css jquery-mobile

【解决方案1】：

对于 jQM，您应该真正将所有内容包装在 data-role="page" div 中，并将内容包装在 content 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 中，您只需设置 center-wrapper div 的宽度并分配一个自动边距以使其居中：

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

这是一个DEMO

【讨论】：

我相信我已经尝试过了，但不确定我是否有这个确切的组合哈哈。感谢所有 cmets/响应，BRB....
这是我需要的组合，多么愚蠢的问题。感谢 DIV-ine 干预:)