CODEWITHSUNDEEP
htmlcss
Brian
Brian

Reputation: 13571

How to move <p> a little bit left with css?

I have an html file like this.

<html>
  <head>
  </head>
  <body>
    <div class="final_time">
      <p class="final_time_text">some text here</p>
    </div>
  </body>
</html>

Here is its corresponding css file.

.final_time {
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  right: 15%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  
}
.final_time_text {
  width: 200px;
  left: -20px;
}

How can I move .final_time_text a little bit left so that it aligns to the center of .final_time?

I mean I want something like this.

enter image description here

I originally thought that setting left: -20px can make it shift left a little bit, but I was wrong.

Here's the code in JSFiddle: https://jsfiddle.net/rf2vnozq/4/

Upvotes: 0

Views: 614

Answers (2)

Ali Sattarzadeh
Ali Sattarzadeh

Reputation: 3549

I think setting position:relative to .final_time_text will do what you want but it would be better to centerlize it using flex box

like this :

.final_time {
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
 /*increase distance of green circle and text*/
  margin-bottom:10px;

}
.final_time_text {
  width: 200px;
  text-align:center;
}

.container{
  display:flex;
  flex-direction:column;
  align-items:center;
  position: absolute;
  right: 15%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}
<html>
  <head>
  </head>
  <body>
   <div class="container">
    <div class="final_time">
     
    </div>
     <p class="final_time_text">some text here</p>
   </div>
  </body>
</html>

Upvotes: 2

92Infinitus92
92Infinitus92

Reputation: 148

just add relative position to the text css

.final_time {
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  position: absolute;
  right: 15%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
  
}
.final_time_text {
  position: relative;
  width: 200px;
  left: -50px;
}
<html>
  <head>
  </head>
  <body>
    <div class="final_time">
      <p class="final_time_text">some text here</p>
    </div>
  </body>
</html>

Upvotes: 2

Related Questions