Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code:

<md-toolbar layout-align="center center">
        <h3>Traffic Light Component</h3>
    </md-toolbar>

    <md-grid-list md-cols="2" md-row-height="250px" md-row-width="1000px">

        <div layout="row" layout-margin>
            <div id="a" flex="25">
                <div id="1">
                    <p>hii1</p>
                </div>

                <div id="2">
                    <p>HIIIIII</p>
                </div>

                <div id="3">
                    <p>tybiurhj</p>
                </div>

            </div>

            <div layout="row" layout-xs="column">
                <div id="b">
                    <md-grid-tile class="image">
                        <img ng-src="{{getStatus(caselist)}}" width="80" height="200"/>
                    </md-grid-tile>
                </div>
            </div>
        </div>


    </md-grid-list>
</div>

While the content is being displayed, I am exploring ways to center the paragraphs. Any assistance is highly valued.

Answer №1

Applying the CSS rule text-align:CENTER; will center align the paragraphs and images.

div#a, div#b{
  text-align:CENTER;  
}
<md-toolbar layout-align="center center">
        <h3>Traffic Light Component</h3>
    </md-toolbar>

    <md-grid-list md-cols="2" md-row-height="250px" md-row-width="1000px">

        <div layout="row" layout-margin>
            <div id="a" flex="25">
                <div id="1">
                    <p>hii1</p>
                </div>

                <div id="2">
                    <p>HIIIIII</p>
                </div>

                <div id="3">
                    <p>tybiurhj</p>
                </div>

            </div>

            <div layout="row" layout-xs="column">
                <div id="b">
                    <md-grid-tile class="image">
                        <img ng-src="{{getStatus(caselist)}}" width="80" height="200"/>
                    </md-grid-tile>
                </div>
            </div>
        </div>


    </md-grid-list>
</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

Change URL link after login user with javascript

Is there a way to generate a URL link based on the user's name (gmail)? For example: The code below is somewhat suitable for my needs. However, I am trying to figure out how to automatically retrieve the username and populate it in the input field. ...

Unable to display complete content of Ionic 3 webpage

Trying to print a specific part of an Ionic page which contains a long list of items. However, encountering an issue where the entire list doesn't fit on one page and requires scrolling down to view all items. Expecting the print dialog, triggered by ...

CSS / JavaScript Navigation Menu overshadowing Flash content in Firefox

On my website, I have a drop-down menu that was created using CSS and JavaScript. This menu drops down over a Flash animation. Interestingly, in Internet Explorer 6 and 7, the drop-down menus successfully appear over the Flash animation. However, in Mozill ...

How can I make a directive in AngularJS refresh itself?

I've created a user editor directive that allows users to edit $scope.User data. When $scope.User is null, the editor switches to 'Create' mode, indicating that a new user will be created once the submitted data. The issue I'm facing i ...

Replace the facebook plugin using JQuery libraries

Does anyone know how to remove the like button on top of the 'Like box' Facebook plugin using JQuery? I have imported the like box from Facebook and I want to eliminate this like button, but Facebook does not allow me to do so. Therefore, I am t ...

Issue with data binding in file upload field

I am currently working on a project using Asp.Net Core MVC. In the model, there is a property called IFormFile. While using a basic input tag, everything works perfectly fine. However, when I tried to implement the file input plugin from this URL, the mode ...

Conceal Child Component Element Upon onClick Event with ReactJS

As someone new to React, I am learning by coding. Currently, I have component A which includes a select element with menu items (all material UI). Is it possible for the whole component to disappear once a user chooses an option from the dropdown? Essentia ...

Would it be considered improper to apply ID's to DOM elements for the purpose of automation, as it may transform their CSS classes into individual entities?

Just thinking about the best approach for Automation (such as Selenium). I've been advised against using IDs on elements, as it could result in JS errors (in case of duplicate IDs) and make CSS classes unique. While I see the point, not having IDs can ...

Saving a user with a BLOB avatar in Angular 5: Tips and Tricks for Success

As a newcomer to Angular, I am trying to figure out how to properly save a new user with an avatar. Can someone help me understand how to pass the Blob value of the avatar to my user Model for successful saving? Below is the code snippet I am working with ...

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

Display or conceal toggle in ruby utilizing jQuery

I'm facing an issue with the functionality of a button that is meant to hide and show a form using jQuery. Initially, I added a path to signup in the button so that it would display and function properly. Now, when I click the button, the form shows u ...

Steps to eliminate the gap between the link element and toggler in Bootstrap 4

Incorporating the code below will create a navigation bar with a cart icon in Bootstrap 4, indicated by the images. The expanded view showcases the cart next to the search section on the right. When viewed on smaller devices in collapsed mode, it should al ...

How can I align text to the bottom right and left corners at the same time?

Is there a way to align text so that it appears in both the bottom right and bottom left corners of the page, functioning as a footer? For example: JANUARY (bottom left corner) / 2019 (bottom right corner) If anyone knows how to achieve this using HTML ...

A JavaScript function that instantiates an object that invokes its own function

Currently, I am working on an Angular service that is meant to return a new object. Everything seems to be fine and in working order. When I use new MakeRoll(), it successfully creates an instance. However, the issue arises when I call self.add towards th ...

Ways to position an element at the center using Flexbox技

Having some difficulty centering an element in my code using flexbox. It seems to work for everything else, but not here. Any suggestions or ideas? .answer { text-shadow: 0 0 2px gr; display: flex; justify-content: center; border-radius: 5px; ...

The primary tab's background color in a Shiny app

I had this question deleted previously while I was in the process of refining it. Is there a way to customize the background color of the active tab in a Shiny app? library(shiny) ui <- fluidPage( tags$head( tags$style(HTML(css)) ), tabsetP ...

Encountering a problem with AngularJS when attempting to access an array and display an alert message

While working with Angular, I encountered an issue in trying to access content stored within an array. Upon reviewing the code, console.log(JSON.stringify($scope.lineItems)) was returning [[]]. However, when inspecting or setting a breakpoint on this line ...

Tips for customizing icons when hovering in CSS

I'm trying to make a default icon light up on hover using CSS, but I'm having trouble getting it to work. Any suggestions on how I can achieve this effect? Thank you! HTML <ul class='nav nav-main nav-sidebar'> <li role=&apos ...

A guide to sending epoch time data to a backend API using the owl-date-module in Angular

I have integrated the owl-date-time module into my application to collect date-time parameters in two separate fields. However, I am encountering an issue where the value is being returned in a list format with an extra null value in the payload. Additiona ...

How can I use jQuery to submit a form that has been removed from the document?

Having a popup with a form inside, the issue arises after clicking "save" and the popup disappears. As a workaround, an attempt was made to clone it using var form = $(this).clone();, followed by calling form.submit() but unfortunately, this method did n ...