What is the best way to shift <p> slightly to the left using css?

I've created an HTML file structured like this.

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

Below is the corresponding CSS file for the HTML setup.

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

Is it possible to adjust .final_time_text slightly to the left so that it aligns perfectly with the center of .final_time?

An example of the desired alignment can be seen in this image: https://i.sstatic.net/aZyJ6.png

Initially, I tried using left: -20px to shift it to the left, but it didn't work as expected.

To see the code in action, check out the JSFiddle link provided here: https://jsfiddle.net/rf2vnozq/4/

htmlcss

Answer №1

If you set the position:relative for .final_time_text, it should achieve the desired effect. However, a more optimal approach would be to center it using flexbox.

Here's an example:

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

Answer №2

simply include a relative position within the css for the text

.final_time {
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  position: fixed;
  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 goes here</p>
    </div>
  </body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective method for managing the onSelect data within the select tag in Angular's reactive form functionality?

Can someone please advise on the best approach to handling this scenario? I have a form with multiple fields, including a select tag. <form [formGroup]="myForm"> <select formControlName="" > <option *ngFor="let c of countries" value ...

javascripthtmlangularangular8

Enhancing jQuery Rating Plugin

Currently, I am working on customizing the jQuery Bar Rating System Plugin. You can view an example of the plugin by visiting this link: . The rating system on my end will resemble Example D. Rather than having the plugin based on user input, my goal is to ...

javascriptjqueryhtmlxslt

Display only distinct items in a v-for loop in Vue.js

I am attempting to show icons based on specific v-for and v-if conditions. However, the icons are appearing multiple times when I only want them to display once. I attempted using v-if = 'index === 0', but this did not resolve the issue. <di ...

htmlvue.js

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

javascripthtmlangulartypescript

How can you trigger a modal to appear when an image is clicked?

There are images inside <div> tags. When one of the images is clicked, a modal appears to display information about the specific image. Each modal has a unique id or class, such as modal4. My example: <image type="image" src="Images/Drake.jpg" ...

htmlcssbootstrap-4

The Fixed Navbar is causing sections to be slightly off from their intended positions

Utilizing a bootstrap navigation menu on my website with a fixed position. When clicking a menu item, it takes me to the designated section but slightly above the desired position. How can I ensure that it goes to the exact position upon clicking the men ...

javascripthtmlangularbootstrap-4bootstrap-5

Ways to stop CKEDITOR from automatically saving textarea or contenteditable content

I've integrated the CKEDITOR plugin for a format toolbar feature on my web application. It seems that the message shown above is a default one provided by CKEDITOR. My goal is to have users start with a blank textarea every time they visit the page, ...

javascriptjqueryhtmlbrowserckeditor

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

Stop unauthorized pages from hijacking login cookies

I have a website called where users can create their own HTML pages accessible through the link if the username is "USR" and project is "PROJECT". However, there is a security concern... Currently, I store users' login tokens as cookies. But what ...

javascripthtmlcookies

Even though I have the image button's ID, I am unable to successfully click on it

I am facing an issue where I can't seem to click on an image button even though I know its ID: driver.findElement(By.id("its Id")).click() Unfortunately, I cannot provide the website link as it is not a public website. However, I have pasted the HTM ...

javascripthtmlseleniumselenium-webdriverselenium-chromedriver

Steps for using selenium to select a radio button

Looking to leverage Selenium in Python 3.9 for button clicking automation. Link to the website https://i.stack.imgur.com/KWsKG.png The goal is to click on "Effective Date", then select "July 2021", and finally click "OK". Initially, the first two steps ...

pythoncssseleniumselenium-webdriverxpath

Tips for including shared information across different ionic tabs

Is there a way to include some shared content, like a canvas, in between the content of different tabs in Ionic? I want this common content to be displayed across all tabs, while each tab still shows its own dynamic data below it. I attempted to add the c ...

javascriptjqueryhtmltabsionic-framework

Utilizing data attributes and JavaScript to dynamically assign a class to carousel navigation items

Hello there! I recently created a carousel and carousel navigation system using Bootstrap. I am now trying to figure out how to detect the value of 'data-slide-to' and then apply a specific style to the corresponding navigation item based on that ...

javascriptjquerycsstwitter-bootstrap

Tips for avoiding re-rendering during onclick event handling

let content=useRef(); let toHide=useRef(); useEffect(()=>{ content.current=document.querySelectorAll('.content'); toHide.current=document.querySelectorAll('.hide'); toHide.current?.[0].addEventListener("cli ...

htmlreactjs

Issue encountered: Compilation error occurred following the update from Angular 11 to Angular 15, stemming from the module build failure within the sass-loader directory

I recently attempted to update angular from version 11 to 15, but encountered an error as shown in the screenshot below ./src/assets/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected "(". ...

cssangularsassbuildmodule

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

htmlcssanimationfullscreen

Steady Navigation Bar in Javascript without Bouncing

While experimenting with a fixed navigation bar, I've encountered an issue where the content below jumps up on the page when the navigation bar "fixes" itself to the top of the screen. You can check out the JSFiddle I've been working on for refer ...

javascriptjqueryhtmlcssnav

Maintaining header and footer while calling a PHP form on the same page

I have a straightforward PHP form, named home.php, that submits to itself: <form action="home.php" method="post" enctype="multipart/form-data" id="AddImageForm"> The issue arises when home.php is accessed from the index.php file (located below). Up ...

phphtml

Adjusting image size as you scroll

Hello everyone, I am currently working on coding a website logo that decreases in size as the user scrolls down, similar to the effect seen on this website: . I am relatively new to HTML and was wondering if there are any specific commands or techniques th ...

htmlcss

What is the best way to shorten string values that exceed a certain length?

Here is an array list I have: $myarray = array( array( 'name' => 'File name 1 - type.zip', 'size' => '600KB', ), array( 'name' => 'File name 2 - type.pdf&a ...

javascriptphphtmlcss