css centering

by jpeter06

HTML

<div class="block orange"  style="float:left;">
    <p>Programa Por & Para de Impulso Profesional</p>
</div>
   
<div class="block blue"  style="float:left; width:200px;" >
    <p>Programa Por & Para de Impulso Profesional</p>
</div>

<div class="block red"  style="float:left;" >
    <p>Programa Por & Para</p>
</div>

<div class="block green"  style="float:left; width:200px;" >
    <p>Programa Por & Para de Prof</p>
</div>

CSS

.block {
    text-align: center;
    height:150px; 
    width:150px;
    box-shadow: 0px 0px 0px 5px #fdfdfd , 0px 0px 0px 6px #ddd  , 1px 1px 3px 6px #ccc ;
    margin:10px 12px;
}
 
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; 
}

.block p {
  display: inline-block;
  vertical-align: middle;
  width: 75%;
}

p{
    color:white;
    font-size:23px;
    text-align:left;
    font-family:arial;
}

.orange{    background-color:#ffa022;}
.blue{    background-color:#44a4ff;}
.green{    background-color:#44bb44;}
.red{    background-color:#ff0000;}