将未知宽度的元素放在居中元素的右侧而不移动它

Question

我有一个以 text-align: center; 为中心的文本元素，我想在它的右侧放置另一个元素（一个小内联 <span>）而不影响它的位置。

两个元素（尤其是 span）都没有已知大小，因此我无法在文本元素左侧使用偏移边距。有没有办法在纯 CSS 中做到这一点？

无效的强制性代码：

<div style="text-align: center;">
    <h3 id="centered-text">My centered text</h3>
    <span class="to-the-right" style="background-color: blue;">BADGE</span>
</div>

Answer 1

如果可以将 h3 和 span 放入包装器中，则可以使该包装器居中，并使用绝对定位将 span 定位在包装器外部。

如果 h3 是整个页面宽度（span 将在可见区域之外），或者如果 span 包含更长的文本（它可能会笨拙地换行），这可能有点棘手。然而，这只是一个开始，这些问题对您来说可能不是问题。

.wrapper {
  display: inline-block;
  position: relative;
}
h3 {
  display: inline-block;
  margin: 0;
}
.wrapper span {
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
}

<div style="text-align: center;">
  <div class="wrapper">
    <h3 id="centered-text">My centered text</h3>
    <span class="to-the-right" style="background-color: blue;">BADGE</span>
  </div>
</div>

Answer 2

您的 css 已关闭。给你的div一个id然后

#divid {margin-left:auto; margin-right:auto; width:100%;}
h3 {text-align:center;}

Answer 3

how's this?

#centered-text {
    display: inline-block;
}
#to-the-right {
    display: inline-block;
    position: absolute;
    margin-left: 4px;
}

<div style="text-align: center;">
    <div id="centered-text">My centered text</div>
    <div id="to-the-right" style="background-color: blue;">BADGE</div>
</div>

我让你的 H3 不是 H3，因为它使 BADGE 看起来奇怪地高于标题，但这可以通过给 BADGE 一个像 "top: 10px;"

这样的属性来轻松纠正

Answer 4

一种不使用定位的方法是使用 display: flex 和一个伪元素。我个人认为更好，但如果您想远离定位，那么这也可以解决问题。

 span {
   background: blue;
 }
 
 div {
   display: flex;
   justify-content: center;
 }
 
 div:before, span {
   content: "";
   flex: 1 1;
 }
 
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

<div>
  <h3>My Centered Text</h3>
  <span>BADGE</span>
</div>

这确实有一些问题，根据您的需要，这些问题可能重要也可能不重要。如果 div 中需要任何其他元素，则需要进行一些重新配置，因为任何新元素也会变成 flex-items 并弄乱 h3.

的居中

此外，您可能会注意到跨度现在延伸到 div 的边缘。如果这不是问题，那么标记就可以了，但如果是问题，则将其包装在另一个元素中也可以解决此问题，如下所示：

span {
  background: blue;
}

.container {
  display: flex;
  justify-content: center;
  margin-bottom: 5%;
}

.container:before,
.badge {
  content: "";
  flex: 1 1;
}

* {
  margin: 0;
  padding: 0;
}

<div class="container">
  <h3>My Centered Text</h3>
  <div class="badge"><span>BADGE</span></div>
</div>

它并不完美，正如我所说，我更喜欢，但如果您想远离定位，那么我认为这是一个不错的选择。

这里是 codepen with both examples。

将未知宽度的元素放在居中元素的右侧而不移动它

Placing an unknown width element on the right of a centered element without moving it

html

css

centering