Angular Flexbox causing alignment problem in CSS styling

I am working on an HTML project that includes Angular FlexLayout components.

<div fxLayout="column">
    <div fxLayout fxLayoutAlign="space-between">
        <span >
         3123131
          </span>
        <span >
         1231231
          </span>

        <span >
           6568
          </span>
        <span >
           989
          </span>
    </div>
    <div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
        <div class="  line first"></div>
        <div class="  line red"></div>
        <div class="  line first"></div>
        <div class="  line red"></div>
    </div>
</div>
<div fxLayout fxLayoutAlign="space-around" fxLayoutGap="20px"
    style="border: 1px solid #eee; border-left: none; border-right: none; margin-left: 10px; padding: 10px;">
    <span class=" large" style="text-align: left;">
          12<span class="small" style="vertical-align: top;">%</span></span>
    <span class=" large" style="text-align: right;">
         68<span class="small" style="vertical-align: top;">%</span></span>
    <span class=" large" style="text-align: left;">
        45<span class="small" style="vertical-align: top;">%</span></span>
    <span class=" large" style="text-align: right;">
          35<span class="small" style="vertical-align: top;">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
    <div fxLayoutGap="30px" fxLayout fxLayoutAlign="space-around">
        <i class="icon thick"></i>
        <i class="icon thick"></i>
        <i class="icon thick"></i>
        <i class="icon thick"></i>
    </div>
    <div fxLayout fxLayoutAlign="space-around">
        <span class=" " style="text-align: right;">
            684
          </span>
        <span class=" ">
            3514
          </span>
        <span class=" ">
           21
          </span>
        <span class=" ">
           354
          </span>
    </div>
</div>

After implementing the code, the displayed output is not as expected. The elements are not aligned properly in a straight line. I am struggling to identify the mistake in my code.

Here is the Stackblitz link for reference.

cssangularangular-flex-layout

Answer №1

To simplify horizontal alignment, you can specify each item to have no width and centered content by using an inline-flex container:

.centered {
  display: inline-flex;
  justify-content: center;
  width: 0px;
}

Once you apply the centered class to the items you want to align, ensure that you maintain consistent spacing on all lines (either space-around or space-between). Check out this StackBlitz demo showcasing the use of space-around:

<div fxLayout="column">
  <div fxLayout fxLayoutAlign="space-around">
    <span class="centered">3123131</span>
    <span class="centered">1231231</span>
    <span class="centered">6568</span>
    <span class="centered">989</span>
  </div>
  <div fxLayout fxLayoutAlign="space-around">
    <div class="centered line first"></div>
    <div class="centered line red"></div>
    <div class="centered line first"></div>
    <div class="centered line red"></div>
  </div>
</div>
<div fxLayout fxLayoutAlign="space-around" class="percentContainer">
  <span class="centered large">12<span class="percent">%</span></span>
  <span class="centered large">68<span class="percent">%</span></span>
  <span class="centered large">45<span class="percent">%</span></span>
  <span class="centered large">35<span class="percent">%</span></span>
</div>
<div fxLayout="column" fxLayoutAlign="center">
  <div fxLayout fxLayoutAlign="space-around">
    <i class="centered icon thick"></i>
    <i class="centered icon thick"></i>
    <i class="centered icon thick"></i>
    <i class="centered icon thick"></i>
  </div>
  <div fxLayout fxLayoutAlign="space-around">
    <span class="centered">684</span>
    <span class="centered">3514</span>
    <span class="centered">21</span>
    <span class="centered">354</span>
  </div>
</div>

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

Tips for setting up communication between UI and backend applications using Nginx reverse proxy in a Docker environment

We have an Angular UI application and a Java Spring Boot backend application. Our goal is to deploy them in Docker containers and establish seamless communication between the front-end and back-end without hard-coding URLs or other specifics. Everything ne ...

angularspring-bootdockernginxnginx-reverse-proxy

The CSS transition effect is smooth when the accordion opens, but it does not have the same effect when

Currently, I am creating an accordion component that is supposed to have a smooth transition effect when opened and closed. However, while the transition works smoothly when the accordion opens, it seems to have some issues when it comes to closing. I hav ...

javascriptcssreactjs

What is preventing the scrollbar-color property from being applied directly to the body element?

I've been experimenting with styling my scrollbars using CSS properties, like those described at https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars. Interestingly, when I apply these properties directly to the body element with code like ...

cssfirefox

HTML5 text enhanced with a dynamic shadow effect

Struggling with adding a shadow effect to text in my front-end development project. Using HTML5, CSS3, bootstrap, and AngularJS for the design elements, I want to achieve a shadow effect similar to what you would see in Photoshop on a text field. Can anyo ...

javascriptangularjshtmlcsstwitter-bootstrap-3

Choosing all components except for one and its descendants

I am searching for a method to choose all elements except for one specific element and its descendant, which may contain various levels of children/grandchildren or more. What I'm trying to accomplish is something like... $("*").not(".foo, .foo *").b ...

javascriptjqueryhtmlcss

Unable to disable background color for droppable element

For my project, I am working with two div boxes. My goal is to make it so that when I drag and drop box002 into another div box001, the background color of box001 should change to none. I have attempted to achieve this functionality using jQuery without s ...

javascriptjqueryhtmlcss

Are there any aesthetically pleasing CSS themes available for GWT integration?

This inquiry has been raised in the past... GWT 2.0 Themes? GWT Themes and Component Libraries ...however, two years have elapsed. Previously, the response was mainly negative unless utilizing a widget library. I am on the lookout for an appealing CSS ...

javahtmlcssgwt

Weird Chrome behaviors with CSS3 animations

I have been working on a CSS3 animation that involves rotating a div with an image in the background. My goal is to have the same animation play at a different speed when the user hovers over the element. Here is the code snippet I have been using: .roc ...

htmlcsscss-animations

I am looking to adjust the width of an element within an Iframe

In my single post, I have a social sidebar on the left side. Currently, the buttons in the sidebar are appearing in different sizes, but I want them all to be the same size as the "Twitter" button. To see the issue, please visit this link. I've tried ...

javascriptjquerycssiframe

Leveraging the ng-template in a broader context

I need to create a recursive menu from JSON data with a specific structure. The JSON looks like this: this.menus = [{ "id": 1, "title": "Azure", "class": "fa-cloud", "url": "#", "menu": [{ "id": 121, ...

angular

Positioning a .png file in the center of a div while giving it a high z-index

Is it possible to ensure that a .png image is always centered in a div, regardless of the device size, and appears above another .png image within the same div? Below is the HTML code snippet: <div class="col-sm-6"> <div id="spi ...

htmlcsspngz-indexbootstrap-5

Unusual behavior exhibited by ng-if within a widget

Hey there, seeking some assistance here. I'm currently making edits to a widget and within the client HTML code, I've come across two ng-if statements (the first one was already there, I added the second). <li> <a ng-if="data.closed ...

htmlangularservicenow-client-scripts

Creating a stunning image fade-in effect with CSS3

I have been working on a way to make images fade in using CSS3 once they have finished loading. However, I am facing an issue where the image fades in and out for a brief moment twice instead of just being blank and fading in. My attempt at a solution inv ...

javascriptjqueryhtmlcss

Removing the css class when an element loses focus

In order to improve user experience on my web page, I have implemented a validation check on a form before submitting it back to the server. The validation process is successful and applies a custom CSS class called ErrorControl to input fields when necess ...

javascriptcssasp.net

How to align a list item to the right using CSS

I'm having trouble aligning items in a list to the right and adjusting their width based on content length. Unfortunately, I haven't been able to make it work despite multiple attempts. Take a look at my code snippet below: .messages { over ...

htmlcss

Interactive Dropdown Menu Generation

Despite my expertise in programming languages like MySQL, PHP, JavaScript, jQuery, HTML, and CSS, the current issue I am facing does not relate to any of these. It essentially comes down to three key aspects: Creating a menu layout with clickable link op ...

javascriptjqueryhtmlcssajax

Encountering the issue of receiving "undefined" when utilizing the http .get() method for the first time in Angular 2

When working in Angular, I am attempting to extract data from an endpoint. Below is the service code: export class VideosService { result; constructor(private http: Http, public router: Router) { } getVideos() { this.http.get('http://local ...

angulartypescriptangular2-services

Ngx-bootstrap tooltips failing to display

In my Angular 7 project, I am utilizing ngx-bootstrap 4.0.1 alongside Bootstrap 4.3.1, and I have a requirement to incorporate tooltips in certain elements of the application. Despite following the documentation for setup instructions, I am facing difficul ...

angulartwitter-bootstrapbootstrap-4angular7ngx-bootstrap

Use CSS to activate a sibling div when hovering over a button within the same div that contains the button

Is it possible to change the color of div #panel when hovering over the button #button inside div #left? #left #button:hover~#panel { background-color: blue; } #panel { position: absolute; float: r ...

htmlcss

Reset all divs to their default state except for the one that is currently active using jQuery

Here's the plan for my script: Once a user clicks on a "learn more" button, it will reveal the relevant information in the corresponding box. I'm aiming to implement a feature where if you click on another "learn more" button while one box is a ...

javascriptjquerycsscss-selectors