Utilizing the Material Design card div element, however the elements inside the card are not properly aligned in the center

I'm attempting to include the align="center" attribute to this Material Design Lite card:

<main class="mdl-layout__content" align="center">
<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
  <div class="mdl-card__title">
    <h2 class="mdl-card__title-text">
      <strong>FOOBAR TEXT</strong>
    </h2>
  </div>
  <div class="mdl-card__supporting-text"></div>
</div>

I've experimented with adding it at various locations within these divs, both collectively and individually, but the items in my card fail to align in the center.

This is how it appears on my screen:

https://i.stack.imgur.com/FZtxN.png

The centered text consists of MDL buttons that resemble text until you hover over them and they transition into buttons (just an additional visual feature). As shown, "California" and the buttons themselves are not perfectly aligned, despite the presence of align="center" in the main class element.

I am utilizing the MDL Portfolio Template:

Preview the template

Download the template

Below is the CSS as requested:

.portfolio-max-width {
    max-width: 900px;
    margin: auto;
    justify-content: center;
}

.portfolio-header {
  position: relative;
  background-image: url(images/header-bg.jpg);
}

.portfolio-header .mdl-layout__header-row {
  padding: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mdl-layout__title {
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}

.is-compact .mdl-layout__title span {
  display: none;
}

.portfolio-logo-row {
  min-height: 200px;
}

.is-compact .portfolio-logo-row {
  min-height: auto;
}

.portfolio-logo {
  background: url(images/logo.png) 50% no-repeat;
  background-size: cover;
  height: 150px;
  width: 150px;
  margin: auto auto 10px;
}

.is-compact .portfolio-logo {
  height: 50px;
  width: 50px;
  margin-top: 7px;
}

.portfolio-navigation-row {
  background-color: rgba(0, 0, 0, 0.08);
  text-transform: uppercase;
  height: 45px;
}

.portfolio-navigation-row  .mdl-navigation {
  text-align: center;
  max-width: 900px;
  width: 100%;
}

.portfolio-navigation-row .mdl-navigation__link {
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  line-height: 42px;
}

.portfolio-header .mdl-layout__drawer-button {
    background-color: rgba(197, 197, 197, 0.44);
}

.portfolio-navigation-row .is-active {
  position: relative;
  font-weight: bold;
}

.portfolio-navigation-row .is-active:after {
  content: "";
  width: 70%;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: rgb(255,64,129);
  left: 15%;
}

.portfolio-card .mdl-card__title {
  padding-bottom: 0;
}

.portfolio-blog-card-full-bg {
  background: url(images/example-blog03.jpg) center / cover;
}

.portfolio-blog-card-event-bg {
  background: url(images/example-blog05.jpg) center / cover;
}

.portfolio-blog-card-strip-bg {
  background: url(images/example-blog06.jpg) center / cover;
}

.portfolio-blog-card-compact .mdl-card__title {
  padding-bottom: 0;
}

.portfolio-blog-card-bg > .mdl-card__actions {
  height: 52px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.2);
}

img.article-image {
  width: 100%;
  height: auto;
}

.portfolio-max-width {
  max-width: 900px;
  margin: auto;
}

.portfolio-copy {
  max-width: 700px;
}

.no-padding {
  padding: 0;
}

.no-left-padding{
  padding-left: 0;
}

.no-bottom-padding {
  padding-bottom: 0;
}

.padding-top {
  padding: 10px 0 0;
}

.portfolio-share-btn {
  position: relative;
  float: right;
  top: -4px;
}

.demo-card-event > .mdl-card__actions {
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    box-sizing: border-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.portfolio-contact .mdl-textfield {
  width: 100%;
}

.portfolio-contact form {
  max-width: 550px;
  margin: auto;
}

footer {
  background-image: url(images/footer-background.png);
  background-size: cover;
}
cssmaterial-designhtmlmaterial-design-lite

Answer №1

utilize the css text-align property

.box
{
  width:200px;
  height:180px;
  padding:5px;
  text-align:center;
  box-shadow:2px 2px 4px #555;
  font-family:Arial;  
}
<div class="box">
  <div class="box-header">
     <h3>NEW YORK</h3>
  </div>
  <div class="box-content">
    <strong><p>yyyyyyyyy</p></strong>
    <strong><p>yyyyyyyyyyy</p></strong>
    <strong><p>yyyyyyyyyy</p></strong>
    <strong><p>yyyyyyyyy</p></strong>
  </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

Display input field in AngularJS when radio button is selected

My JavaScript array looks like this: $scope.quantityMachines = [ { 'snippet' : 'One' }, { 'snippet' : 'Two' }, { 'snippet' : 'Three or more', 'extraField' : true }, { ' ...

javascripthtmlangularjsng-show

How to modify an array in an HTML document using BeautifulSoup

Running a Python script, I am trying to access a local HTML file containing a JavaScript array inside a script tag that needs updating. Here is the test code snippet: from bs4 import BeautifulSoup html = ''' <script> var myArray ...

pythonhtmlbeautifulsoup

Problem with the menu button overflowing

I'm exploring the process of designing burger menus for the mobile version of my site. I've successfully created a basic burger menu with some JavaScript assistance, but I encountered an overflow issue. The burger menu functions properly, but the ...

htmlcss

capturing the selected value from a dropdown menu upon form submission

Take a look at this HTML form: <form id="form1"> <select name="date" class="form-control"> </select> <input type="submit" name="submit" id="submit" value="Save" onclick="SubmitForm('#form1', 'editcustomer_callu ...

html

Toggle the highlighting in React

I have a list of data that displays in a Collapse, and I want it to highlight for every user click in the list, but only one at a time should be highlighted. If you'd like to see a sample to better understand this concept, please check out: https:// ...

cssreactjsmaterial-ui

Configuration options for content division in a table cell

Please see the following fiddle which I have attempted: http://jsfiddle.net/9LdEc/ code: html: <div id="CorpDealerSearch"> <div class="row"> <div class="left"> Quarter To Date </div&g ...

htmlcss

The Art of Dynamic Component Manipulation in Angular

The current official documentation only demonstrates how to dynamically alter components within an <ng-template> tag. https://angular.io/guide/dynamic-component-loader My goal is to have 3 components: header, section, and footer with the following s ...

htmlangulartypescript

Converting forward slashes (/) to %2f in an AJAX request

I keep encountering this question, but no one seems to have a satisfactory answer. My problem centers around an ajax request that utilizes a value from a text field in the format: 00000000/relay_1A. Whenever I attempt to submit, I receive a 404 error. St ...

jqueryhtmlajaxscala

A JavaScript pop-up box with two windows

Struggling to create two separate dialog boxes using this code. The issue is that when I add the code for the second dialog box, it only appears if the first one does too. Here's the code for the first dialog: function showPopUp(el) { var ...

javascripthtml

How can you implement a transform transition toggle when a user clicks on an element

Check out this CodePen example for a cool overlay animation: https://codepen.io/pen/MoWLrZ Experience the unique animation of two overlays as you click for the first time. However, on the second click, watch as both overlays seamlessly return to their ori ...

jqueryhtmlcssanimation

Create Stylish Popups and Spacious Containers with CSS

A unique pure css popup was crafted by merging and . Hovering over "John Smith" triggers the appearance of the popup. The code for this can be seen at http://codepen.io/kikibres/pen/MwEgQX. However, there are some challenges being faced. The aim is to ke ...

htmlcss

Guide on altering the cursor icon during an AJAX operation within a JQuery dialog

When I have a JQuery dialog open and make some $.ajax calls, why can't I change the cursor? I want to display a progress cursor while the code is processing so that users can see that the action is still ongoing. However, even though I update the CSS ...

jquerycssajaxcursor

MVC Template with a Defective BootStrap

Struggling with creating an MVC master template along with sub-pages using Bootstrap. Sadly, I seem to have messed it up and can't quite figure out where the problem lies. You can check out my test website at Do you see how the different sections a ...

cssasp.net-mvc-4twitter-bootstrap

Are we utilizing this JavaScript function properly for recycling it?

Two functions have been implemented successfully. One function adds the autoplay attribute to a video DOM element if the user is at a specific section on the page. The other function smoothly slides in elements with a transition effect. The only limitatio ...

javascriptjqueryhtmlcss

Expanded MUI collapsible table squeezed into a single cell

I'm experimenting with using the MUI table along with Collapse to expand and collapse rows. However, I've noticed that when utilizing collapse, the expanded rows get squished into one cell. How can I adjust the alignment of the cells within the p ...

javascriptcssreactjsmaterial-ui

Error: knockoutjs - unable to locate ko

Here is the knockoutjs code that I have written: $(function () { function QuizViewModel() { var self = this; self.previousQuestions = ko.observableArray([]); self.questions = ko.observableArray([]); self.thisQuestion = ko.observable() ...

htmlknockout.js

What is the best way to create a triangle shape that is responsive to elements?

I'm trying to make a background shape with a triangle inclusion using CSS. I want it to be responsive to all screen sizes, but I'm having some trouble. Any tips on how to achieve this? header { width: 100%; height:150px; background: #eee; } m ...

htmlcssresponsive-design

execute a different function once the animation has finished running with the .bind

When attempting to detect the completion of a CSS animation in order to remove a class, I encountered an issue where using .bind causes the animation end event to trigger even for the other function. You can view the complete code here. How can I ensure ...

jquerycss

Is the div empty? Maybe jQuery knows the answer

I currently have a <div id="slideshow"> element on my website. This div is fully populated in the index.php file, but empty in all other pages (since it's a Joomla module). When the div is full, everything works fine. However, when it's emp ...

javascriptjquerycss

Styling elements with inline-block in IE8

Although there are countless questions addressing this particular issue, allow me to provide more details: The Dilemma The situation is as follows: aside { display: inline-block; } section { display: inline-block; margin-left: 2em; } Here, the eleme ...

htmlcssinternet-explorer-8