What's the best way to horizontally center an inline element within a block element using CSS?

I need help centering an inline element (like a span) within a fixed-width block element. The goal is to have the position of the inline element determine how the text is laid out in the block element.
Here's an example:

        .container {
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
        }
        .centered {
            /* NEED TO CENTER THIS HORIZONTALLY INSIDE THE CONTAINER DIV */
        }
       <div class='container'>
        Lorem ipsum dolor sit amet, ullum latine vituperatoribus sed ad, ut sit nihil sententiae. Ad minim prodesset eum, mei ei <span class='centered'>dicam</span> facete accusata, sea nonumy postulant ut. No fabellas facilisis mel, iriure constituto constituam vix te. </div>

Here is a visual representation of what I'm trying to achieve: https://i.sstatic.net/6HOF1.png

Appreciate any assistance with this issue.

htmlcsscenter

Answer №1

.box {
        margin-left: 500px;
        width: 200px;
        white-space: nowrap;
        overflow: scroll;

           }
.middle {
            /* ALIGN THIS ELEMENT AT THE CENTER (HORIZONTALLY) OF THE BOX DIV */
          }

Answer №2

If you're struggling to perfectly center the .centered tag within the .container div in your HTML code, I have a solution for you.

.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.centered {
  font-weight: 600;
  font-style: italic;
  margin: 0px 4px;
  font-size: 1.1em;
}
<div class='container'>
Lorem ipsum dolor sit amet, ullum latine vituperatoribus sed ad, ut sit nihil sententiae. Ad minim prodesset eum <span class='centered'>dicam</span> mei ei facete accusata, sea nonumy postulant ut. No fabellas facilisis mel, iriure constituto constituam vix te. 
</div>

Please note that this solution will only work if the .centered element is truly at the center position in your HTML structure.

Feel free to take a look at the working code on this Fiddle link

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

Unable to view Mp4 video on Internet Explorer 11

My background video is in mp4 format and functions properly in Chrome, Firefox, and other browsers, but it does not work in Internet Explorer 11. To visit the website, click on "access as a non-secure site". ...

csshtmlhtml5-videointernet-explorer-11

PHP script not recognizing CSS styles

My coding dilemma involves a script that is supposed to display numbers from 1 to 100 in black font. For multiples of 3, it should show "Three" in green, and for multiples of 7, it should display "Seven" in blue instead of the number. If a number is a mult ...

phpcss

Increase the line spacing within paragraphs by eliminating the extra space at the top and bottom

Trying to adjust line height in a paragraph using CSS. Here is the HTML: <div> <p>Lorem ipsum dolor sit amet, oratio doctus his an. Nisl saperet delenit ad eos, his eros solet vituperata et, has tantas nemore consetetur ne. Nam cu au ...

htmlcss

Emphasize Links in Navigation Bar

I am in the final stages of completing the navigation for my website. I have included the jsfiddle code to display what I have so far. The issue I am facing is that my child links turn gray as intended, but I also want the top level link to turn gray when ...

javascriptjquerycssnavigation

Issues with CSS media queries not being responsive in Safari

Can anyone shed light on why media queries are not functioning properly in Safari? Here is an example: body { background-color:black; } @media screen and (min-width: 1024px) and (max-width: 1300px) { body { background-color:red; } } ...

css

Altering child components' properties from the parent component in Vue.js

Presenting the Tabs.vue component featuring four tabs: <template> . . <v-tab href="#tab-1" @click="showFirstTabFunc"> First Tab <v-icon>check_box_outline_blank</v-icon> </v-tab> <v-tab hr ...

javascripthtmlvue.jsvuejs2vuetify.js

Remove and modify an li element that has been dynamically generated within a ul list

Currently, I am facing an issue in my code. I am dynamically creating li elements by taking input from an input box and then appending the data within li tags using jQuery. However, after adding the li element, I have included a delete button. The problem ...

javascriptjqueryhtml

CSS exhibiting variations on similar pages

Although the pages look identical, they are actually pulled from the same template file in Drupal but have different URLs. nyc.thedelimagazine.com/snacks In my document head, I've included a style rule that overrides a stylesheet further up the casc ...

cssdrupal

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: https://i.sstatic.net/GpvfC.png <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={th ...

javascripthtmlcssreactjssvg

Why is it impossible for me to delete the class / property of this object?

Within a series of nested divs, there are additional divs containing multiple imgs. The goal is to cycle through these images using CSS transitions. To achieve this, a JavaScript object was created to track the divs, sub-divs, and images. Three arrays were ...

javascripthtmlcssarrays

What is the best way to ensure a flex element occupies a greater space within another flex element using TailwindCSS?

After spending hours trying different solutions and even resorting to brute force, I am still struggling to make this work. Objective: To increase the width of the cards when the screen size is larger Below is my main component: function App() { const ...

cssreactjsflexboxtailwind-css

Exclusive JQuery Mobile Styles

Although I enjoy using JQuery Mobile, I'm facing compatibility issues with my custom Javascript on the page. Despite everything functioning correctly without JQuery Mobile, adding the library causes problems that I've been unable to resolve. Ess ...

jqueryjquery-uicssjquery-mobile

Can anyone provide instructions on how to create a theme change animation using Vuetify?

Follow these steps to understand what I'm describing: Go to the Vuetify website Click on the settings icon Choose between the dark or light theme option. When you switch between themes, there is an animation that occurs. A circle starts expanding fr ...

cssvue.jsvuetify.jsvuetifyjs3

What could be causing the DIV elements in this React Bootstrap list to not be centered?

I'm currently working on creating an image gallery using react-boostrap. Everything is scaling properly when I resize the page, but the images are still aligned to the left. Is there a way to center them instead? <div class="container-fluid&qu ...

cssbootstrap-4react-bootstrap

Establish a table containing rows derived from an object

I am currently dealing with a challenge in creating a table that contains an array of nested objects. The array I have follows this schema: array = [ { id: 'Column1', rows: { row1: 'A', row2 ...

javascripthtmlangulartypescript

Adjusting Font Size for Buttons on Mobile Devices in HTML

I am currently working on a website that I want to ensure is mobile-friendly. When testing it on my phone and in Chrome's device mode, I noticed that the majority of the text on the screen was displayed at an easily readable size without needing to zo ...

htmlcss

CanJS utilizes mustache templates to escape HTML tags

I have a requirement to present a series of choices to the user. I am using a mustache template along with the CanJS JavaScript framework to showcase these options. The problem arises when attempting to display an option such as: Potato Rs. 12 The mustac ...

javascripthtmlmustachecanjscanjs-view

What is the process of modifying a row within an HTML grid?

I created a grid using the following code snippet: newcontent += "<tr><td class=\"row\">" + a[i][0] + "</td><td>" + a[i][1] + "</td><td class=\"edit\"><img class=\"editrow\" name=\" ...

jqueryhtmlgrid

Combining Content, Attr, and Url in a single statement

I've been utilizing the content attribute for quite some time now, but today I decided to explore something different. Instead of relying on JS to show an image tooltip, I was curious if it could be done dynamically using CSS. So I attempted the foll ...

cssurlattrcss-content

Issue with Chrome Browser Border Radius Bug when applied to element with Display: Table

I'm facing an issue with border radius in the Chrome browser. When applying a border-radius to an element styled with dashed border-style and display:table, the background-color exceeds the limit of the border. Here's how it appears in Chrome: ...

css