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

Creating an Interactive Menu System with Nested Options in Angular 2

I have a JSON structure that I need to transform into a menu with sub-menus based on the value of the sub-menu_location field. Here's an example: { "data": [ { "menu_name": "Primary Operations", "enabled": true, "sub-menu_lo ...

javascripthtmlcssangular

Ensuring the child div's height does not overflow beyond the parent div

When dealing with a parent div and a child div, both having different heights, how can I specifically retrieve the height of the portion of the child div that is within the boundaries of the parent div? Using document.getElementById("id").style.height prov ...

javascripthtmlcss

What steps should I take to design a polished PDF document?

I have been tasked with automating the invoicing system at our company. Currently, all data is stored in a local MySQL database and someone manually updates an Excel spreadsheet, which is then merged into a MS Word template for generating invoices. The obj ...

htmlcssxmlpdfxsl-fo

AngularJS: Issue with ng-show and ng-click not functioning when button is clicked

I have a specific requirement where I need to display and hide the description of each column in a table when a button is clicked. Here is the visual representation of what I have: the table In my HTML code, I have defined a button with ng-click as a func ...

javascriptangularjscontrollerangularjs-ng-clickng-show

Ways to evaluate the controller using the template offered by the state in ui-router

Instructions for setting up ui router: $stateProvider .state('search', { url: '/search', views: { content: { templateUrl: 'scripts/search/search-content.html', ...

angularjsunit-testingangular-ui-router

Maintain access to at least one section by utilizing the AngularUI Collapse feature

Can someone help with customizing the Angular UI to have only one section open at a time, similar to the jQuery Accordion? You can find the Plunker code here: http://plnkr.co/edit/zv8D1QdDs55iJ47UJhtM?p=preview ...

twitter-bootstrapangularjsangular-ui

The parameters in AngularJS URLs are passed as query parameters

I have configured a $state with the following settings: .state('app.subjects.current', { abstract: true, url: "/:subjectId", template: "<div ui-view />", ncyBreadcrumb: { skip: true } }) .state('app.subject ...

angularjsangular-ui-routersession-state-provider

Leveraging Firebase Dynamic Links through JavaScript

Currently exploring options for implementing Dynamic Links. Firebase Dynamic Links seem promising, but the lack of support for Cordova/ ionic apps is concerning. Is there any plan to add this in the future? Are there any other alternatives that you would ...

javascriptangularjscordovadeep-linking

The HTML code does not display list items

I'm having trouble getting the image to display in the list element of my toolbar creation. Here is my CSS and HTML code: ...

htmlcss

Looking for assistance in reducing the vertical spacing between divs within a grid layout

Currently, I am in the process of developing a fluid grid section to showcase events. To ensure responsiveness on varying screen resolutions, I have incorporated media queries that adjust the size of the div elements accordingly. When all the divs are unif ...

javascriptcssgrid

Hide an Angular button when a page is loaded, depending on the information found in a table

How can I hide the Submit button in a table row if a certain condition is met based on information from the database? I attempted to create a function that returns true or false, but it ends up crashing my program because it runs continuously. I also trie ...

javascripthtmlangularjs

Eliminate any unnecessary gaps that may exist between the cards within the deck

Utilizing Jinja2 with Flask to render a list on an HTML page, I aim to produce card decks containing data from the list using a Jinja2 loop. This is my current HTML code: <div class="container-fluid"> <div class="row"> <div clas ...

htmlcsstwitter-bootstrapjinja2

revealing the excessive vertical space in the div upon clicking the link

Here is the structure: +-----------------------------------------------------------------------+ | | | heading {position: fixed;} | |________ ...

jqueryhtmlcss

The magic of CSS Pseudo-classes in Inline Styling

For the longest time, I've been under the impression that you cannot include in-line :hover{..} styles to an element. However, recently I stumbled upon this page which showcased examples like this. <a href="http://www.w3.org/" s ...

htmlcss

Using Angular route resolve to handle the sessionStorage login status

I have successfully created a login system using Angular JS. Once the user logs in, a session storage variable is set and they are redirected to a dashboard page (which should only be accessible when logged in). $window.sessionStorage["isLoggedIn"] = true ...

javascriptangularjsroutesresolve

How to vertically align content using Zurb Foundation's equalizer feature?

I am currently utilizing Zurb Foundation 5 along with the equalizer component. In a scenario where I have three columns of equal width, I am aiming to achieve vertical center alignment for the content (text) in the middle column and vertical bottom alignme ...

csszurb-foundation

Looking for assistance in merging CSS and HTML codes?

I am working on combining two different codes and could use some assistance. Here is the HTML code: <div class="loader"> <span></span> <span></span> <span></span> </div> Followed by the CSS cod ...

csseclipsehtml

What is the purpose of adding this webkit CSS rule?

Whenever I open Chrome developer tools, I come across something that puzzles me. I always assumed that a CSS property is crossed out when it's overwritten by another class. However, I found myself in this peculiar situation: https://i.sstatic.net/Xm ...

cssgoogle-chrome-devtoolsweb-frontend

Having trouble getting the jQuery click event to work on iPhone browsers? Despite already trying the cursor:pointer; method

I am facing an issue with setting a click event on anchor tags in my WordPress site. Surprisingly, the event works perfectly fine on all of my devices including PC, Android phone, and tablet except for my iPhone. Despite trying to set the 'Cursor&apo ...

jqueryioscssclick

Every symbol located at the top of the <td> element

SOLVED by P. Leger: In my CSS I just modified the vertical-align property to top, which successfully resolved the issue for me I am working on creating a basic schedule system where the admin has the ability to manage users and assign them to specific dat ...

htmlcssimage