有没有一种方法可以将一个元素居中，然后在它的右侧直接放置另一个元素？

Question

我想把一个文本元素居中，然后在它旁边加上一个解释性的“这是什么？”。但是当我输入“这是什么？”时，显然会使原始文本元素偏离中心。是否可以使用CSS或HTML来修复这个问题？

- Dan

---

你能否发布你的HTML和CSS或JSfiddle？这样回答会更容易些。 - Shoeb Mirza

将你的文本元素设为 float:left;。 - Shoeb Mirza

Answer 1

你可以使用CSS将需要居中的文本元素包装在一个div中，并对该div应用position:absolute样式。

- Mark

Answer 2

这里是一个例子，不需要为任何元素分配宽度。这应该可以很好地处理投入其中的任何文本长度。

http://codepen.io/ay13/pen/GJKawz

HTML和CSS：

    h1 {
        text-align: center;
    }
    
    h1 a {
        position: absolute;
        margin-left: 10px;
    }

<h1>
    <span>Centered Text <a href="#">What is this?</a></span>
</h1>

- Andy

Answer 3

这是一个关于如何实现的例子： http://jsfiddle.net/wgbs4asv/1/ 基本上，你需要将右侧的“这是什么？”div放在主div内（并在主div内容之前），但是将右侧的“这是什么？”div的CSS设置为：

float: right;
width: 100px;
margin-right: -100px;
position: relative;

（但可以使用任何所需宽度，并使用负的右边距来匹配该宽度）。这个宽度将抵消主 div 的位置，但是负的 margin 值与 position: relative 会把它带回来。

- mith

Answer 4

如果您分享您的代码，那会更好。

但无论如何，您需要将文本定位为相对位置，然后在其中添加解释，并将其定位为绝对位置，下面是清晰明了的代码。

.parent {
    width: 80%;
    background: lightblue;
    display: flex;
    justify-content: center;
}

.container {
    position: relative;
    display: flex;
    justify-content: center;
    width: 80%;
    height: 80px;
    background: lightslategrey;
    border: 1px solid red;
}

.text {
    position: relative;
    width: fit-content;
    background: lightcoral;
    text-align: center;
}
.explanatory { 
    width: max-content;
    position: absolute;
    z-index: 10;
    color: white;
}

 <div class="parent">
        <span class="container">
            <p class="text">text text text 
                <span class="explanatory">what is this?</span>
            </p>
            
        </span>
    </div>

- Mad7Dragon