Center the span in CSS by setting its position to absolute

Question

Center the span in CSS by setting its position to absolute

I am trying to create a span element positioned as absolute inside a div. The div has top and left values set. When the user inputs text, the span expands with the given text towards the right to contain it. However, I would like it to grow symmetrically on both sides. For example, if the user inputs a word of 7 characters, the character in position #4 should be exactly centered.

Is there a way to achieve this using pure CSS? Alternatively, is there a method to adjust the value of left using JavaScript with good accuracy?

javascript html css

Answer 1

Answer №1

To achieve center alignment, you have a few options available such as using flexbox, text-align, or absolute positioning.

<div>
  <span>Centered Text</span>
</div>

<style>

div {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid black;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

</style>

Using the above code will place the top left corner of the <span> element at the center of the <div>, and then adjust its position halfway to the left and up to perfectly center it within the <div>.

Answer 2

To achieve center alignment, you have a few options available such as using flexbox, text-align, or absolute positioning.

<div>
  <span>Centered Text</span>
</div>

<style>

div {
  position: relative;
  width: 200px;
  height: 40px;
  border: 1px solid black;
}

span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

</style>

Using the above code will place the top left corner of the <span> element at the center of the <div>, and then adjust its position halfway to the left and up to perfectly center it within the <div>.

Center the span in CSS by setting its position to absolute

Answer №1

Similar questions

Meta tag information from Next.js not displaying properly on social media posts

Ensure that the background div extends all the way to the bottom of the page

The combination of Angular Hottowel's 'blocks.exception' and 'blocks.router' prevents the App from being displayed in the browser

Blank space on the lower portion of my website as I attempt to implement a responsive layout

Creating a dynamic drag-and-drop layout in React using react-grid-layout

Turning a text into a JSON data structure

Utilize Vue.JS to showcase JSON information from an external file

What is the purpose of including the return keyword in this function to ensure the promise functions properly?

Creating a Dynamic Dependent Dropdown with Jquery and Ajax in PHP

Transitioning from a fixed position to absolute in CSS3

The error message "node-soap - callback is not a function" is indicating that there

Programmatically adding route resolve in Angular using $routeProvider

Adjust google maps to fill the entire vertical space available

Tips for centering a paragraph vertically within a div element

Eliminate duplicate entries in typeahead.js by ensuring unique data sources for both prefetch and remote

Seeking guidance on utilizing JavaScript for implementing an onclick event

Tips for transferring an array from a php page to a javascript page

I am having success posting data through a form, however, the fetch API is not functioning as expected for me

Where am I going wrong in my attempts to use a callback function?

Transforming a JavaScript object into a different shape