What is the best way to horizontally center a div with the layout attribute set to "row"?

I am currently working with a grid composed of cards from the Angular Material library. The issue I am facing is that the cards have a fixed size, which results in extra space on the right immediately after wrapping. My goal is to eliminate this space by centering the md-content. However, since the width of the row determines the width of the md-content, proper centering becomes challenging. How can I resolve this and make the width of the md-content equal to the actual content width? Thank you.

<md-content layout="row" layout-wrap>
  <md-card ng-repeat="channel in $ctrl.channels" ui-sref="" md-ink-ripple>
    <div layout-align="center" layout='row' style="width: 160px; height: 160px">
      <img ng-src="{{channel.logo_url}}" alt="{{channel.name}}" style="width: 100%;" />
    </div>
    <footer style="padding: 2px;" layout-align="center">
      <h3>{{channel.name}}</h3>
    </footer>
  </md-card>
</md-content>
cssangularjsangular-material

Answer №1

Adjust the position of the content by setting its margin

Answer №2

To center the content, you can add layout-align="center" to the md-content. Check out this example on CodePen

Keep in mind that if there are "less" cards in the bottom row, they will also be centered which may not be desired.

HTML Markup

<div ng-controller="AppCtrl as ctrl" ng-cloak="" ng-app="MyApp">
  <md-content layout="row" layout-wrap layout-align="center">
    <md-card ng-repeat="channel in ctrl.channels" ui-sref="" md-ink-ripple>
      <div layout-align="center" layout='row' style="width: 160px; height: 160px">
        <img ng-src="{{channel.logo_url}}" alt="{{channel.name}}" style="width: 100%;" />
      </div>
      <footer style="padding: 2px;" layout-align="center">
        <h3>{{channel.name}}</h3>
      </footer>
    </md-card>
  </md-content>
</div>

JavaScript

angular.module('MyApp',['ngMaterial'])

.controller('AppCtrl', function() {
  this.channels = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
});

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

Building a contact form in Angular and sending emails with Nodemailer

Currently, I am in the process of setting up a contact form for my website. Since I am utilizing a MEAN stack, it made sense to incorporate the nodemailer module for sending emails. In order to handle this functionality, I have established an endpoint &ap ...

javascriptangularjsnode.jsexpressnodemailer

The footer element rebels against its designated functionality

The standard structure follows: <body> <div class="wrapper"> <nav></nav> <myContent></myContent> </div> </body> <footer></footer> In this setup, the footer is expected to ...

htmlcss

Arrange the "See More" button in the Mat Card to overlap the card underneath

I'm currently working on a project that involves displaying cards in the following layout: https://i.stack.imgur.com/VGbNr.png My goal is to have the ability to click 'See More' and display the cards like this: https://i.stack.imgur.com/j8b ...

cssangular

I am experiencing issues with my button not responding when I click on the top few pixels

I've created a StackBlitz version to illustrate the issue I'm facing. It seems like the problem might be related to my CSS for buttons... Essentially, when you click on the button at the very top few pixels, it doesn't register the click an ...

css

Exploring the Power of ng-class with Multiple Conditions in AngularJS

Is it possible to add an additional condition to my ng-class true/false statement in AngularJS when using ng-repeat? <tr ng-repeat="data in myData" ng-class="{true: 'green', false: 'red'}[data.IsPositive]"> <td> ...

angularjsangularjs-scopeng-classng-showangular-ng-if

Positioning children in CSS Flexbox: one at the top and the

Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top: .all { display: flex; hei ...

htmlcssflexbox

Firefox does not display the line headings on the sides

Hey everyone, I'm facing a compatibility issue with CSS and Firefox today. When I go to my website www.fashoop.com, you'll notice some header lines on the sides. Here's an example in Google Chrome: (GOOGLE CHROME EXAMPLE) COLOR BLUE AN ...

css

What is the process for utilizing Angular's emulated encapsulation attributes on HTML elements that are dynamically added to an Angular component?

Within my custom Angular component, a third-party library is dynamically adding an HTML element. I am seeking a solution that can apply Angular's encapsulation attributes to these elements regardless of the specific third-party library being used. If ...

cssangularangular-components

Unable to assign a value to a property within an object using AngularJS

const objectData = {}; objectData[key]["digits"] = `${set.first},${set.second},${set.third},${set.fourth}`; When key is a numeric value, an error occurs: TypeError: Cannot set property 'digits' of undefined ...

javascriptangularjs

What causes divs to be interspersed among other divs when Float is enabled?

I am looking to create a layout for 4 sections, similar to a table, utilizing only divs and CSS. The intended output is this: Logo-----------Info Business-------Client I initially thought it would be simple by using the Float property. However, when I se ...

htmlcss

Step-by-step guide on utilizing the vendor.ts file available at https://angular.io/docs/ts/latest/guide/webpack.html

As per the guidelines provided at https://angular.io/docs/ts/latest/guide/webpack.html, it is recommended to include vendors like jQuery in the vendor.ts file. // Other vendors for instance jQuery, Lodash or Bootstrap // You can import js, ts, css, sass, ...

angularjsangulartypescript

Struggling with aligning images in the center while ensuring they remain responsive on various devices

My website has an image with dimensions of 955x955, which is a square size. I want this image to be responsive on all devices, but the section it's in is not squared. This causes the image to look distorted when viewed on smaller screens. The focus of ...

htmlcss

What is the best way to have child controllers load sequentially within ng-repeat?

Currently, I have a main controller that retrieves data containing x and y coordinates of a table (rows and columns). Each cell has a child controller responsible for preparing the values it will display based on the x and y values from the parent control ...

javascriptangularjs

Angular Table with sort, pagination, and search functionalities

ts file import { Component, OnInit, ViewChild } from '@angular/core'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } fr ...

angularangular-material

populating all available space in layouts using bootstrap columns

I am attempting to create a grid layout using bootstrap, but I am facing an issue with positioning one of the columns. I have tried adjusting the placement of the divs and using offsets/pulls, but so far I have not been successful. To explain what I am a ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

javascriptphpjqueryhtmlcss

Use AngularJs service injected in run closure for testing purposes

Testing an angularjs service called MyService has been a bit challenging. It seems like Angular tries to use the service before it is fully loaded when I try to inject it directly. However, if I mock MyService using $provide, it does work but then I don&ap ...

angularjsunit-testingkarma-runner

Safari displays an inexplicable gray border surrounding the <img/> element, despite the actual presence of the image

https://i.stack.imgur.com/4QR52.png There is an unexpected gray border visible around the dropdown image, as seen above. This occurrence has perplexed me because, according to several other queries, this problem arises when the image's src cannot be ...

csssafari

Exploring the capabilities of an Angular factory

I am facing challenges in improving the unit test coverage of an Angular project, particularly when trying to test an AngularJS factory with multiple dependencies. The factory I am working on has 5 dependencies, and I am struggling to even write a basic t ...

angularjsunit-testingjasminekarma-jasmine

When attempting to render HTML containing multiple CSS classes within a JSON request parameter, the styles are not being applied as expected

In my API, I'm dealing with a JSON request parameter that includes an HTML string. This HTML string references CSS styles from a separate .css file. However, when an HTML element has two CSS classes assigned to it, neither of the classes' styles ...

ioscssjsonswifthtml-email