Использование материалов Дизайн карты Div элемент, но содержимое внутри карты не будет центрирован

Question

Я пытаюсь добавить align="center" на эту карту, которая из материала 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> 

Я пытался добавить его в каждый из этих divs и все вместе и отдельно, и содержимое с моей карточкой все равно не будет центрироваться.

Это то, что она выглядит с моей стороны:

Текст в центре являются фактически MDL кнопки, которые появляются на текст, пока вы наводите мышь над ними, и они «выскочить» на быть кнопкой (только компонент колокола и свистка). Как вы можете видеть, «Калифорния» не совсем сосредоточена, и, откровенно говоря, ни одна из кнопок (несмотря на элемент основного класса, содержащий align="center").

Я использую шаблон MDL Портфолио:

Preview of the template

Download link of the template

Вот является CSS по запросу:

.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; 
} 

Answer 1

использовать CSS выравнивания текста свойство

.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>