-2

I want to add a text beside a centered text without moving the centered text.

Example: C is a centered text and s is a side text:

+++++
 sC

+++++
ssC

+++++
sCCC

Is this possible with CSS?

Tibs
  • 735
  • 5
  • 16
jtwalters
  • 1,024
  • 7
  • 25

3 Answers3

2

Sure, use flexbloxes like this. This is gross, but at least it works.

.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>
  • Why this is gross? I'm sorry but I'm new on this – jtwalters Jan 16 '18 at 15:59
  • It's gross because I set both `side`s to 50% of the width of the container : this should take 100% of the container, right ? Well no, because your content is 200px wide. So your container should be 100% of its size, plus 200 pixels. That's why it is gross. Otherwise, it does the job :) –  Jan 16 '18 at 16:00
-1

It sounds like if you are trying to display text before or after the element in which case you may want to read over https://developer.mozilla.org/en-US/docs/Web/CSS/::before

See the example below.

.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;
}
<div class="container">
  <div class="center-text">CCC</div>
</div>
OhDavey
  • 167
  • 1
  • 3
  • 9
  • When you put a hundred `s` in the before, the text isn't centered anymore. –  Jan 16 '18 at 15:42
  • Yeah, it kind of seems unpractical to put a hundred characters in a before tag... maybe at that point you may want to reconsider your approach. Down vote implies that is not solution to the problem, keep that in mind. – OhDavey Jan 16 '18 at 17:18
  • It IS not the solution to the problem. That's why I'm down voting it. First, it centers the content only if the before content is equal to the after content. Where do you see an after content in his explanation ? Second, this was a quick explanation. What if he wants to put content and not a C and a bunch of s ? Third, you will need to update your css to update your html content. How is that user friendly ? And last, you might not see, but I'm about 6k reputation (not bragging), I know what a down vote is for, that's why I gave you one, and I gave on to the guy that answered the same thing. –  Jan 16 '18 at 17:24
-2

Is this possible with CSS? Yes it is. If you're just exploring and playing around with CSS, you can do it by using :before or :after pseudo element. Set the positioning of the parent element to relative then set the pseudo element's position to absolute so you can control its positing inside the centered element div.

However it is a bad practice if you will use this in your work.

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>
Tibs
  • 735
  • 5
  • 16
  • Please explain the reason behind the downvote. – Tibs Jan 16 '18 at 15:27
  • I gave you one too : instead of putting 3 `s`, put a hundred and see how it behaves. This isn't what he asked. –  Jan 16 '18 at 15:32
  • And also, you have to go into your css to set the content of the side text. This isn't practical (but it is my opinion, I was just giving my two cents on that one). –  Jan 16 '18 at 15:33
  • Thanks for your opinion. But I've highlighted in my answer that you can control the pseudo element because its positioning is set to absolute. – Tibs Jan 16 '18 at 15:35
  • I just answered what the OP asked. "Is this possible with CSS?" Which is technically yes. I even highlighted in my answer that is is a bad practice. – Tibs Jan 16 '18 at 15:37
  • Being able to control it doesn't mean it will behave otherwise. You should make a generic answer, not one that only suits a use-case. You're telling me that if you put a hundred `s`, you will also need to change the `left` property accordingly ? Not very generic ... –  Jan 16 '18 at 15:37
  • And as I told you, this doesn't suit his case, because your side-content overlaps the content. –  Jan 16 '18 at 15:38
  • That's why I have this phrase in my answer "If you're just exploring and playing around with CSS" . But I will keep that in mind. Thanks. – Tibs Jan 16 '18 at 15:39