0

I'm trying to add align="center" to this card that is from Material Design Lite:

<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 tried adding it at each one of these divs both all together and separately and the contents with my card still won't center.

This is what it looks like from my end:

enter image description here

The text in the center are actually MDL buttons that appear to be text until you mouse hover over them and they "pop out" to be a button (just a bell and whistle component). As you can see, "California" isn't quite centered, and quite frankly neither are the buttons (despite the main class element containing align="center").

I am using the MDL Portfolio Template:

Preview of the template

Download link of the template

Here 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;
}
Lasagna Cat
  • 297
  • 3
  • 24
  • align attribute is not supported in HTML5 ..on th other hand use css text-align:center...and to help you more plese but your css and html here – Mo Shal Oct 06 '16 at 18:37
  • I will post the CSS in a bit, but I do want to clarify that the align attribute IS IN FACT supported in HTML5. It works in other elements on this same page right now. Are you perhaps referring to how it's not supported in certain elements within HTML5? – Lasagna Cat Oct 06 '16 at 18:41
  • I've added the CSS to the main post. Thank you. – Lasagna Cat Oct 06 '16 at 18:42
  • i will show the css and answer you , align not support in html5 but its work now in most of browser but maybe in future it stoped check here http://www.w3schools.com/tags/att_div_align.asp – Mo Shal Oct 06 '16 at 18:45
  • add the html too please – Mo Shal Oct 06 '16 at 18:47
  • I see what you're saying now, regarding align attribute. My mistake. – Lasagna Cat Oct 06 '16 at 18:53
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125132/discussion-between-mohade-and-nav-bowman). – Mo Shal Oct 06 '16 at 19:01

1 Answers1

-1

use the css text-align property

.card
{
  width:270px;
  height:250px;
  padding:2px;
  text-align:center;
  box-shadow:1px 1px 2px #333;
  font-family:Liberation Sans;  
}
<div class="card">
  <div class="card-header">
     <h4>CALIFORNIA</h4>
  </div>
  <div class="card-body">
    <strong><p>xxxxxxxxx</p></strong>
    <strong><p>xxxxxxxxxxx</p></strong>
    <strong><p>xxxxxxxxxxx</p></strong>
    <strong><p>xxxxxxxxx</p></strong>
  </div>
</div>
ProgramForSA
  • 35
  • 3