3

It's hard to ask this question without a visual reference, so I included a picture below (as well as a code snippet). I'm trying to achieve two things:

  1. right-align the blue <span> circle inside the yellow <p> box
  2. keep the text centered in the <p> box, independent of the blue circle

This is my code:

.circle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block
 }
 
 .box {
  background-color: yellow; 
  height: 30px; 
  width: 500px; 
  text-align: center; 
  margin: 10px
 }
 
<p class='box'>This is centered</p>

<p class='box'>This is not<span class='circle'></span></p>

I'm not super familiar with HTML, but I tried doing align-self: right for the circle, but nothing happened. Not sure what to do.

Here is a picture of what I'm trying to achieve:

enter image description here

Umutambyi Gad
  • 4,082
  • 3
  • 18
  • 39
SNN
  • 137
  • 1
  • 1
  • 9

2 Answers2

3

just float:right and add margin to center

.circle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  float: right;
  margin: 5px;
}

.box {
  background-color: yellow;
  height: 30px;
  width: 500px;
  text-align: center;
  margin: 10px;
  box-sizing: border-box;
}

.box2 {
  padding-left: 30px; /* circle width (20px) + circle margin-left (5px) + margin-right (5px) = 30px */
}
<p class='box'>This is centered</p>

<p class='box box2'>This is not<span class='circle'></span></p>
doğukan
  • 23,073
  • 13
  • 57
  • 69
DCR
  • 14,737
  • 12
  • 52
  • 115
1

You can use absolute position.

.circle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  /* added */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

.box {
  background-color: yellow;
  height: 30px;
  width: 500px;
  text-align: center;
  margin: 10px;
  position: relative; /* should be relative */
}
<p class='box'>This is centered</p>

<p class='box'>This is not<span class='circle'></span></p>

To center the text vertically and horizontally:

.circle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  /* added */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 10px;
}

.box {
  background-color: yellow;
  height: 30px;
  width: 500px;
  text-align: center;
  margin: 10px;
  position: relative; /* should be relative */
  
  /* add these to center text vertically and horizontally */
  display:flex;
  align-items:center;
  justify-content: center;
}
<p class='box'>This is centered</p>

<p class='box'>This is not<span class='circle'></span></p>
doğukan
  • 23,073
  • 13
  • 57
  • 69
  • Nice, thanks! What is that "transform: translateY(-50%)"? Does that just move the blue circle all the way to the right? – SNN Jul 25 '20 at 20:25
  • 1
    `top: 50%` and `transform: translateY(-50%)` is necessary to center it vertically. – doğukan Jul 25 '20 at 20:27