The justification feature in HTML CSS does not seem to be functioning as intended

        <table >
            <tbody>
                <tr>
                    <th colspan="1">FrisBar:</th>
                    <th > <p style="color:#111;">00</p> </th>
                </tr>
                <tr>
                    <td><p>Totaal:</p></td>
                    <td><p id="FrisBarTot1">0</p></td>
                </tr>
                <tr>
                    <td><p>Kratjes:</p></td>
                    <td><p id="FrisBarKrat1">0</p></td>
                </tr>
                <tr>
                    <td><p>Overige:</p></td>
                    <td><p id="FrisBarOver1">0</p></td>
                </tr>
            </tbody>
        </table>

The alignment of the "Totaal" and "Kratjes" sections is correct, but the "Overige" section is not aligning as desired. Can anyone provide a solution to this issue?

Edit:

Using a table has resolved the alignment issue, and adjusting the "00" values has ensured consistency in size and spacing for the numbers. Thank you to everyone who assisted me with this matter!

htmlcsstext-alignmenttext-align

Answer №1

Consider trying this out.

  #main {
  transition: margin-left 0.1s;
  padding: 16px;
  display: flex;
  justify-content: center;
}

.mainText p {
  padding: 0 20px;
}
<div id="main" class="mainText">
  <p class="bartext" id="tabelFrisBar">Total: 0 Crates: 0 Miscellaneous: 0</p>
  <p class="bartext" id="tabelFrisExtra">Total: 0 Crates: 0 Miscellaneous: 0</p>
  <p class="bartext" id="tabelBierExtra">Total: 0 Crates: 0 Miscellaneous: 0</p>
</div>

Answer №2

The issue lies in the use of inline-block, which based on your screenshot, should be blocks instead. Here is the revised code based on the screenshot:

.bartext-container {
  display: flex;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;
}
  
.bartext {
  align-self: flex-start;
  background-color: #000;
  color: #fff;
  flex: 0 0 auto;
  margin-bottom: 15px;
  position: relative;
  padding: 15px;
  width: auto;
  
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
}
<div id="main" class="mainText">
  <div class="bartext-container">
    <div class="bartext" id="tabelFrisBar">  
       Total: 0<br>
       Crates: 0<br>
       Other: 0
    </div>
    <div class="bartext" id="tabelFrisBarExtra">  
       Total: 0<br>
       Crates: 0<br>
       Other: 0
    </div>
    <div class="bartext" id="tabelFrisBarExtra">  
       Total: 0<br>
       Crates: 0<br>
       Other: 0
    </div>
  </div>
</div>

Answer №3

Utilizing a table format successfully creates a uniform size/space for the numbers when adding two 0s into the second cell.

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

Refresh the browser tab's content

How can I reload the specific content of a browser tab? I am looking for a solution that does not rely solely on jQuery (although I prefer it if there are more options available). Here is what I need: I have a page with many links to other pages (the fo ...

javascriptjqueryhtmlbrowser

Enhance the functionality of Woocommerce email notifications by incorporating a customized VAT field

I have exhausted all options and tried various email hooks without success. I inherited an outdated PHP code that was developed by someone else, which I updated for new woocommerce hooks (since the code is 4 years old). Everything is functioning smoothly e ...

javascriptphphtmlwordpresswoocommerce

Retrieving the Href attribute from a designated div class with JQuery

I'm currently developing a Google Chrome extension where I need to extract the source code of a webpage using a jQuery get function. Here is how I implemented it: $.get(link,function(data){ // The entire source code of the link will be stored in the ...

jqueryhtml

Seeking to develop a unique domain-specific language tailored for generating HTML code

I have a vision to develop my own personalized domain-specific language that generates HTML. Essentially, I aim to design quizzes using my custom markup language and later have it transformed into HTML format. For instance: > What is your favorite col ...

htmlcode-generationantlr

Accessing and parsing an XML file in Webstorm IDE with the use of node.js and ajax

I've recently upgraded to the newest Webstorm IDE to work on my webpage development with Ajax. 1. When attempting to read a local xml file, I started the server and accessed localhost with Chrome, but unfortunately, I couldn't read the local xml ...

javascripthtmlajaxnode.jswebstorm

Although IE may have issues, @font-face is not functioning properly in Chrome and FireFox

Hello, I've encountered an issue with implementing @font-face in CSS. It seems to be working properly in Internet Explorer, but it has no effect in FireFox and Chrome. I am trying to add a custom font to my website by placing the files Snazanin.ttf an ...

htmlcss.htaccessfontsfont-face

Utilizing encoding and decoding techniques in PHP and JavaScript with robust data attribute validation

I am utilizing data attributes to transfer information from HTML to JavaScript. The data attributes are derived from MySQL data, so they may contain spaces, resulting in validation errors since spaces are not permitted within attributes. My proposed solut ...

phpjavascripthtmlvalidationencode

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...

javascriptcssangularjsfroala

jQuery Swiper slider

I am currently working with the Swiper jQuery slider for my project. As a beginner in programming (js / jquery), I am looking to run a specific function, involving some jquery code, whenever the first slide of the slider is active. It seems that this can ...

javascriptjqueryhtml

Modifying color scheme in ASP.NET web application's table

Although I'm not very familiar with this, I'll try to help out. I have an ASP.Net MVC web app in Visual Studio where one of my views, called View Details, contains a table that displays colors based on a specific scale. This scale consists of onl ...

htmlasp.net-mvccolorshtml-table

Arranging HTML components in Vue.js using v-for loop

Recently, I started using vue.js and I have a requirement where I need to display an HTML structure based on API data. The structure should look like this: <div class="row"> <div><p>text1</p><img src="{{imgurl1}}" /></di ...

javascripthtmlvue.js

Decrease the size of the hyperlink area to only the center portion of the text for a more precise click target

Normal text links are present: <a href="projects.html">Projects</a> Is it feasible to make only the middle part of the letters clickable? Such as excluding the top of 'P' or the bottom of 'j'? a { font-size: 50px; ...

htmlcss

Expandable sidebar using responsive Twitter Bootstrap

I am in search of a CSS solution to implement a button that can toggle a sidebar on and off using twitter bootstrap. Is there a specific term for those small icons seen on webpages that resemble pull tabs when the sidebar is closed and then move along wit ...

jquerycsstwitter-bootstrapsidebar

Buttons aligned vertically alongside an input text field

I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far: jQuery(document).ready(function($) { // Implementing bootstrap minus and plus plugin // Reference: http://jsfiddle.net/lael ...

javascriptjqueryhtmlcss

Issue with aligning CSS in Internet Explorer 7

Everything looks great on Firefox and IE8, but on IE 7 the middle "search input text field" is not aligned properly with the other two fields. It seems to be dropping down slightly. Here is the code - thank you for your help: <!DOCTYPE html PUBLIC "-/ ...

cssinternet-explorer-7

Text box size in user input not adapting on mobile devices

Website: Visit the Cutter Travel Calculator here I've encountered an issue with my user input text boxes on mobile. Despite setting their width using the formidable forms plugin, the size adjustment doesn't seem to apply when viewed on mobile de ...

javascripthtmljquerycsswordpress

Display or conceal a div element using a dropdown menu selection

I have implemented the following code, which is currently functional and was sourced from a different thread on Stack Overflow: <Select id="colorselector"> <option value="red">Red</option> <option value="yellow">Y ...

jqueryhtml

Trouble with clearTimeout function

//Account Creation - Register Button Event $('#registerCreateAccount').on('click', function() { var username = $('#registerUsername').val(); var email = $('#registerEmail').val(); var age = $('#regis ...

javascriptjqueryhtmlajax

Customizing HTML Select Elements

Can the HTML Select attribute be customized to have a flatter appearance? Although I can set the border to be 1px solid, the dropdown part still appears 3D and unattractive. ...

htmlcss

How to modify checkbox and textarea values in a MySQL database with Jquery

In my MySQL database, I have a textarea and three checkboxes. By default, the textarea value is null and the checkbox values are set to zero (0). When I enter text into the textarea, I am able to update the text value in my database. However, I am facing ...

phpjqueryhtmlmysql