Is there a way for me to align my numbers in a vertical column?

Here is the table I am working with:

table td {
    width: 200px;
    text-align: center;
}

.red {
    border:1px solid red;
}
<table>
  <thead>
      <tr>
          <th>Price</th>
      </tr>
  </thead>
  <tbody>
    <tr>
        <td class="red">$ 11.122,00</td>
    </tr>
    <tr>
        <td class="red">$ 11.1,00</td>
    </tr>
    <tr>
        <td class="red">$ 11.122,00232</td>
    </tr>
    <tr>
        <td class="red">$ 11.122,00</td>
    </tr>
  </tbody>
</table>

I am trying to center the numbers within each td, but I can't figure out how to stack the numbers vertically while keeping them centered. Adjusting the CSS to right-align the numbers simply moves them to the right side of the cell without stacking them as needed.

Instead, I want the numbers to remain centered within each cell, stacked neatly on top of each other for a cleaner presentation in the table.

Answer №1

To achieve the desired layout, consider organizing your text within a flexible flex structure and specify a min-width that matches the width of your widest content. Here's an example:

<td class="red">
  <div class="flex-container">
    <div class="flex-item">$ 11.122,00</div>
  </div>
</td>
.flex-container {
  display: flex;
  justify-content: center;
}

.flex-item {
  text-align: right;
  min-width: 100px;
}

If this meets your requirements, you can view a live demo on JSFiddle.

https://i.sstatic.net/6EHtd.png


Alternatively, if you're looking to achieve a different effect, check out this example on another JSFiddle link.

https://i.sstatic.net/7HQf3.png

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

Samsung mini devices experiencing issues displaying Unicode symbol (25be)

I'm currently facing an issue with an iconfont that I have included in my website. I am using Unicode symbols for the characters of the icons, and most of them are displaying correctly. However, there are a couple that are showing up as blank on the s ...

Guide to embedding an iframe generated with JavaScript into a React component

I'm currently working on developing an app that will utilize an iframe. The goal is to have controllers in place to adjust the style of the iframe and add text to it, essentially creating a preview function. I've been attempting to use Javascript ...

What is a neat trick to conceal an image when we hover over it?

Within my project, I have a grid layout showcasing images of various items through ng-repeat. My goal is to have the images disappear upon hover, and be replaced by a new div of equal size containing all the sub-components of the item. However, instead o ...

Including emoticons in text without impacting the 'line-height'

Is there a way to add an emoticon within a paragraph without altering the line-height, regardless of the size of the emoticon? For example: I've tried using position: absolute or vertical-align: text-top, but neither seems to work. p img { hei ...

What is the best way to eliminate the scroll buttons from a scroll bar within a scrollPane in JavaFX?

Here's a snippet of code from the CSS file: .scroll-bar .button { visibility: hidden; -fx-background-color: black; } Despite this code, the scroll bar buttons are unaffected. You can see an image of the issue here. I would greatly appreciate any hin ...

Tips for avoiding HTML injections in HTML tooltips

I'm attempting to create a tooltip using HTML, but I need to escape specific HTML elements within it. So far, my attempts have been unsuccessful. Take a look at the example I've provided: http://jsfiddle.net/wrsantos/q3o1e4ut/1/ In this example ...

Looking to create applications for Android and iOS that can integrate with a module designed in Adobe Captivate

I have created an interactive e-learning module using Adobe Captivate, which has been published in both HTML5 and SWF formats. The module includes some interactive elements/actions that can be accessed by clicking on them. It works perfectly fine in a web ...

Updating the progress bar without the need to refresh the entire page is

Currently, I have two PHP pages: page.php and loader.php. Loader.php retrieves data from MySQL to populate a progress bar, while page.php contains a function that refreshes loader.php every second. This setup gets the job done, but it's not visually a ...

Directive isolated scope is encountering an undefined $scope variable

After searching through various Stack Overflow posts on the issue, I have tried different solutions but still can't get my directive to render. The goal is to pass an integer to my directive within an ng-repeat loop and display an emoji based on that ...

Is it possible to create a translucent glass floating box over HTML elements, similar to the frosted glass effect seen in iOS7?

Creating an overlapping div with a frosted glass effect typically requires using an image background (like ). I am interested in having a floating div (position:fixed) that can apply a frosted glass effect over any content below it, whether it be an image ...

Using only HTML and CSS, part of the text should transition in a Carousel without the use of JavaScript or jQuery

Looking to create a Carousel with changing text at a fixed interval, focusing on topics like mobile IoT application development and transport products. Currently utilizing the Aurelia framework. $('#carouselExampleSlidesOnly').carousel({ int ...

Is there a way to effortlessly scroll an element when the CSS overflow property is designated as auto?

I need help with creating a testimonial section where two divs automatically scroll inside a fixed-height container. Currently, only one div is scrolling while the other remains static in my code. I have implemented JavaScript for automatic scrolling wit ...

How can I make a 100vh div stick to the screen?

Is there a way to fix a Google map in a div to the screen so that the map on the left side remains fixed while the content on the right side can scroll? I've tried using position:fixed but it doesn't seem to be working. See the pictures below for ...

Using string literals in Vue and HTML classes

When a user attempts to log in with the wrong password, I want multiple alert popups to appear on the UI instead of just one. This will help the user understand if they are still entering the incorrect password. To achieve this, I decided to use a counter ...

As I spun four images along the outer edge of a circular border, one image came to a halt at 90 degrees, revealing its content. Now, I am looking to enlarge that particular

I managed to rotate four images around a circular border and stop one image at every 45-degree angle. However, I am struggling to enlarge the image that stops at 90 degrees on the website while still showing the content of the respective image when it reac ...

Can you remind me of the specific CSS class used for Internet Explorer in Twitter Bootstrap?

Currently utilizing Twitter Bootstrap and curious if there is a specific CSS class to designate IE browsers within the BODY or HTML tags. Interested in writing CSS specifically for all IE browsers. Aware that Bootstrap offers some CSS classes for IE brows ...

Troubleshooting: Issue with Bootstrap 4's container-fluid not functioning as

I recently started learning Bootstrap 4 through a Udemy tutorial but I'm having trouble with the container-fluid class. Despite my efforts, the container doesn't stretch to full width as intended. Here is the code I'm working with: <!doc ...

MVC model not displaying data on postback

As a beginner in C#, I am facing an issue when I post back the form to the server, it shows null values in the model. I am completely lost and need help. Can anyone guide me on what to do? Snippet of Controller Code: [HttpPost] [ValidateAntiForgeryToken] ...

unique design for custom scrollbar on dropdown menu

I'm looking to customize the scrollbar for a select box. I've experimented with the code below, but I want to avoid using the default scrollbar on the select box. Instead, I want to implement a custom scrollbar without using the size attribute on ...

Use JavaScript to convert only the initial letter to uppercase

Once again, I am in the process of learning! Apologies for the simple questions, but learning is key... Attempting to implement a trick I found online to change all letters to uppercase, I am now trying to adjust it to only capitalize the first letters. T ...