想要将 div 与 ion-label 居中，但后者的宽度为 100%答案

【问题标题】：Want to center div with ion-label inside, but latter width is 100%想要将 div 与 ion-label 居中，但后者的宽度为 100%
【发布时间】：2018-08-09 20:21:26
【问题描述】：

我正在做一个 Ionic 3 应用程序，但我在设计它时遇到了问题。具体的HTML代码是这样的：

<div class="use-conditions">
    <ion-checkbox class="checkbox" formControlName="acceptUseConditions"></ion-checkbox>
    <ion-label text-wrap class="checkbox-label">Want to center this text and the checkbox</ion-label>
</div>
<button class="submit-button" ion-button round type="submit">ENTER</button>

默认情况下，“使用条件”div 宽度是这样的：

它水平填充所有空间（它与内部ion-label 具有相同的宽度）。而且，如果我尝试将此 CSS 应用于“使用条件”div:

.use-conditions {
    margin-left: auto;
    margin-right: auto;
    width: 50%
}

它暂时居中（好！）：

但是，如果我水平扩展窗口，它会失去其居中位置：

所以，我认为将宽度设置为 50% 并不好。实现这一目标的正确方法是什么？

【问题讨论】：

标签： html css ionic3 centering

【解决方案1】：

您可以使用具有响应性的弹性框。

去掉 margin-auto 和 width: 50%，然后将 button 和 .use-conditions 包装在一个 div 中，并赋予它这些样式。

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

这里有一个小提琴来更好地说明弹性盒子是如何用于这些情况的。 https://jsfiddle.net/q8pyjsvn/42/

这是让您开始使用 flex box 的好地方。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

【讨论】：

【解决方案2】：

您可以通过使 use-conditions div inline-block 和它的父 text-align:center 来居中它

body {
  text-align: center;
}

.use-conditions {
  display: inline-block;
}

<div class="use-conditions">
  <ion-checkbox class="checkbox" formControlName="acceptUseConditions"></ion-checkbox>
  <ion-label text-wrap class="checkbox-label">Want to center this text and the checkbox</ion-label>
</div><br>
<button class="submit-button" ion-button round type="submit">ENTER</button>

或者你可以在使用条件 div 中添加文本对齐中心

【讨论】：