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

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 2

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

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

.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 3

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

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

Answer 4

在不使用定位的情况下执行此操作的方法是使用display: flex和伪元素。我个人认为oxguy3's way更好，但如果你想远离定位，那么这也可以解决问题。

 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中需要任何其他元素，则需要进行一些重新配置，因为任何新元素也会成为弹性项目，并且会使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>

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

这是codepen with both examples。

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

4 个答案: