将文本与其父母居中

Question

我不太擅长CSS，我想我们会很容易为你们中的一员。

请看下面的图片，我试图将文字居中，但是以div父母的宽度为中心，好像没有按钮，但我不知道如何继续。

<div class="parent" style="width:500px;">
    <div class="container" style="width:400px;"> My text here </div>
    <button style="width:100px;">My Button</button>
</div>

我试过了：

.parent { text-align: center; }

但是文本的中心是.container宽度（所以200px），但是我正在寻找一种方法来将它居中250px（.parent width）

我想用左边的填充物来做这件事，但那不是＆＃34;清洁＆＃34;在我的情况下，因为按钮并不总是显示。

如果有人知道我该怎么做，请：）

图像：

Answer 1

如果我理解你，那么你需要做的就是为你的div添加一个text-align属性。

.div { text-align: center }

我做了一个与你的图表匹配的快速示例，希望它有所帮助。 https://jsbin.com/qubeqezama/7/edit?html,css

Answer 2

一种选择是在按钮上使用绝对定位！

＆＃13;

＆＃13;

.parent {
  position: relative; // position the button within the parent div
}

button {
  position: absolute;
  right: 0;
  top: 0; // or whatever, position it where you want it
}


.container {
  padding-right: 100px; // so the text doesn't overlap with the button
  padding-left: 100px; // so the text is balanced 

  text-align: center;
}

＆＃13;

＆＃13;

＆＃13;

编辑：

如果不需要按钮，您可以在父母上使用条件 -

＆＃13;

＆＃13;

.container--with-button {
  padding-right: 100px;
  padding-left: 100px;
}
.container--without-button {
  padding: 0;
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

从我看到的内容，您只需要将display: block;添加到.parent元素。这样它们都会显示为一个块，然后所有文本都将居中。 ;）