CODEWITHSUNDEEP
htmlcsscentering
bardo
bardo

Reputation: 363

Placing an unknown width element on the right of a centered element without moving it

I have a text element centered with text-align: center;, I want to place another element (a small inline <span>) to the right of it without affecting its position.

Neither of the elements (and especially the span) have a known size, so I can't use an offsetting margin on the left of the text element. Is there a way to do that in pure CSS?

Obligatory code that doesn't work:

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

Upvotes: 0

Views: 77

Answers (4)

David Mann
David Mann

Reputation: 2260

A way to do this without using positioning is to use display: flex and a pseudo element. I personally think that oxguy3's way is better, but if you want to stay away from positioning then this will also do the trick.

 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>

This does have a few issues that may or may not matter based on your needs. If any other elements are needed in the div, then some reconfiguration is necessary, because any new elements also become flex-items and mess with the centering of the h3.

Also, as you may notice the span now extends to the edge of the div. If this is not a problem, then the markup is fine as is, but if it is a problem then wrapping it in another element also fixes this problem, like so:

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>

It's not perfect and, as I said, I like oxguy3's answer better, but if you want to stay away from positioning, then I think this is a good alternative.

Here's a codepen with both examples.

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28553

Your css is off. Give your div an id and then

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

Upvotes: 0

Hayden Schiff
Hayden Schiff

Reputation: 3330

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>

I made your H3 not an H3 because it made the BADGE appear weirdly high above the title, but that could be easily corrected by giving the BADGE an attribute like "top: 10px;"

Upvotes: 4

GolezTrol
GolezTrol

Reputation: 116100

If you can put the h3 and the span inside a wrapper, you can center that wrapper, and position the span outside the wrapper using absolute positioning.

This may be a bit tricky if the h3 is full page width (the span will be outside of the visible area), or if the span contains a longer text (it may wrap awkwardly). However, it's a start, and those issues may not be issues to you.

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

Upvotes: 1

Related Questions