用他的 parent 居中文本

Question

我不是很擅长CSS，我想我们对你们中的一个来说会很容易。

看看下面的图片，我试图让我的文字居中，但它以 div parent 的宽度居中，就好像没有按钮一样，但我不知道如何进行。

<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 宽度）

我考虑使用 padding-left 来实现，但在我的情况下这不是 "clean" 方法，因为按钮并不总是显示。

如果有人知道我该怎么做，请:)

图片：

Answer 1

如果我没理解错，那么您只需在 div.

中添加 text-align 属性

.div { text-align: center }

我在这里做了一个与您的图表匹配的简单示例，希望对您有所帮助。 https://jsbin.com/qubeqezama/7/edit?html,css

Answer 2

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

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

编辑：

当不需要按钮时，您可以在父级上使用条件 --

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

Answer 3

据我所知，您只需将 display: block; 添加到 .parent 元素即可。这样它们都会显示为一个块，然后所有文本都将居中。 ;)

用他的 parent 居中文本

Center a text with his parent

css

text

parent

alignment