在中心元素的右侧放置一个未知宽度的元素而不移动它

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一个像“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中需要其他元素，则需要进行一些重新配置，因为任何新元素也会变为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>

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

这里是codepen with both examples。