Question

我想在居中文字旁边添加文字而不移动居中文字。

示例： C 是居中文字， s 是旁边文字：

+++++
 sC

+++++
ssC

+++++
sCCC

这可以用CSS吗？

Answer 1

当然，请使用这样的flexblox。这很糟糕，但至少它有效。

.container {
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.container > * {
  border: 1px solid #ccc;
  padding: 6px 12px;
  box-sizing: border-box;
}

.side {
  flex: 1 1 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.side:nth-child(1) {
  justify-content: flex-end;
}

.content {
  width: 200px;
  text-align: center;
}

<div class="container">
  <div class="side"><p>Side text</p><p>Side text</p></div>
  <p class="content">Content text</p>
  <div class="side"></div>
</div>

Answer 2

听起来好像是在尝试在元素之前或之后显示文本，在这种情况下，您可能需要阅读https://developer.mozilla.org/en-US/docs/Web/CSS/::before

请参阅下面的示例。

＆＃13;

.container {
  width: 100%;
  background: #eee;
}
.center-text {
  display: table;
  margin: auto;
}
.center-text:before {
  content: "s";
  font-size: smaller;
}

.center-text:after {
  content: "s";
  font-size: smaller;
}

＆＃13;

<div class="container">
  <div class="center-text">CCC</div>
</div>

＆＃13;

Answer 3

这可以用CSS吗？是的。如果您只是在探索和玩CSS，可以使用：before或：after伪元素。将父元素的位置设置为relative，然后将伪元素的位置设置为absolute，这样就可以控制其在居中元素div中的位置。

然而如果您在工作中使用此功能，这是一种不好的做法。

div.centered-element{
  text-align: center;
  width: 100%;
  background-color: #f0f0f0;
  position: relative;
}

div.centered-element:before{
  content: "sss";
  color: red;
  position: absolute;
  left: 30%;
}

<div class="centered-element">C</div>

在居中的文字

3 个答案: