Ways to prevent a floated element from impacting text-align: center styling?

Question

Ways to prevent a floated element from impacting text-align: center styling?

Within my code, there is a  element structured as follows:

<div><p>Text Goes Here <span></span</p></div>

The CSS I currently have is:

div { text-align:center } span { float:right }

An issue arises when I populate the span with text - it shifts the content to the left. Is there a way to ensure that the paragraph remains unaffected when the span is filled with text? It's important to note that I am unable to modify the HTML, so it must remain unchanged.

Appreciate any guidance on this matter!

html css

Answer 1

Answer №1

One solution that comes to mind is:

section {
  text-align: center;
  position: relative;
}
span {
  position: absolute;
  right: 0;
}

This code snippet effectively removes the  from the overall layout, ensuring that it doesn't affect the surrounding text. However, if the  becomes too large, it may overlap with other elements on the page.

Answer 2

One solution that comes to mind is:

section {
  text-align: center;
  position: relative;
}
span {
  position: absolute;
  right: 0;
}

This code snippet effectively removes the  from the overall layout, ensuring that it doesn't affect the surrounding text. However, if the  becomes too large, it may overlap with other elements on the page.

Ways to prevent a floated element from impacting text-align: center styling?

Answer №1

Similar questions

How can I create my own custom pagination and sorting features instead of relying on the default ui-bootstrap options?

I need to remove the mobile view of my Angular application because it is not optimized for smaller screens

Rails and Materialize CSS icons encountering unexpected alignment issues

Problem with CSS transition on horizontal scrolling list items

The previous user's selection of checkboxes will be disabled

The lightbox feature seems to be malfunctioning, despite having successfully loaded jQuery

The alignment of the image is malfunctioning

"Entering a text message will prompt the appearance of the on-screen keyboard in capital

In IE8, the section cannot extend to full width

Guide on creating an autonomous select-all checkbox to show table columns

Is it possible to rearrange an array by moving an element to the front

Submitting form by clicking a link on the page

Example of a chat server code using NodeJS

Menu collapse button failing to Show content

``Enhance your website with stunning Bootstrap 4 image cards that beautifully showcase

Expanding sidebar height to match parent using Flexbox

How can I adjust the regular font size within a paragraph or link using bootstrap?

Easily convert 100% of the height to pixels

saving selected values to the database

Simple Steps to Convert an HTML String Array into Dynamic HTML with AngularJS Using ng-repeat