Выравнивать кнопки ReadMore Горизонтально

Question

Я хотел бы попросить кого-нибудь, чтобы направить меня на вопрос, как я могу идеально выровнять три кнопки по имени Подробнее Горизонтально.

Ссылка на сайт: http://advancedspinecareolympia.com/

PSD Я пытаюсь Mimic: http://i.stack.imgur.com/w4mkt.jpg

<p class="heading">Who We Are?</p> 
<p class="cdata"><span style="font-weight: bold;">Advanced Spine Care</span> is a health care clinic which focuses on recovery of musculoskeletal complaints in one place. The staff utilizes Chiropractic Mobilization, Massage and Modern Rehabilitative concepts to treat patients.</p> 
<p class="cdata">Aaron Fitzpatrick Clinic Director &amp; Chiropractic Physician is also a licensed massage therapist and has worked throughout the west coast and Europe providing his services. He specializes in difficult conditions and only treats those patients he believes he can help.</p> 

<div style="margin-top: 80px;"> 
<div style="width: 33%; float: left;"> 
<p style="color: #000; font-size: 1.5em; margin-bottom: 30px;">About Us</p> 
<p class="cdata">Dr. Aaron will take the time to see the whole puzzle fits together. Dr. Aaron is both a Massage therapist and as well as a Chiropractor and will use tools from his medicine chest to address your complaints in a unique and therapeutic manner.</p> 
<p style="margin-top: 50px;"><a class="button-link" href="#">Read More</a></p> 

</div> 
<div style="width: 33%; float: left;"> 
<p style="color: #000; font-size: 1.5em; margin-bottom: 30px;">Our Goals</p> 
<p class="cdata">Dr. Aaron is committed to searching for the cause of your pain, treating it and when possible teaching you how to avoid it.</p> 
<p style="margin-top: 110px;"><a class="button-link" href="#">Read More</a></p> 

</div> 
<div style="width: 33%; float: left;"> 
<p style="color: #000; font-size: 1.5em; margin-bottom: 30px;">Our Philosophy</p> 
<p class="cdata">Dr. Aaron will take time to see how the whole puzzle fits. 
Dr. Aaron is both a Massage therapist and as well as a Chiropractor and will use tools from his medicine chest to address your complaints in a unique and therapeutic manner</p> 
<p style="margin-top: 30px;"><a class="button-link" href="#">Read More</a></p> 


</div> 
</div> 

Answer 1

Поскольку вопрос не очень специфичен в отношении кода, я дам общий ответ на чем один можно проверить через Chrome Developer Console на своем веб-сайте.

То, что я думаю, что может помочь это:

• Сделать DIV, содержащий три дивы (об/Философия/целей) позиции: относительная
• Сделать кнопки позицию: абсолютная (они будут ссылаться на содержащий DIV)
• Дайте им нижний: 0 стиль, чтобы они начинались со дна, содержащего div, или любое другое значение, чтобы они могли быть смещены вверх.

Answer 2

Добавить этот код в свой стиль и применить шрифт-семью в качестве PSD.

.button-link { 
 
    -moz-user-select: none; 
 
    background-color: #138de8; 
 
    border-bottom: 1px solid #20538d; 
 
    border-radius: 0; 
 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, 0.2); 
 
    color: #ffffff !important; 
 
    left: 50%; 
 
    padding: 7px 15px; 
 
    text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.9); 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    transition-duration: 0.2s; 
 
    text-decoration: none; 
 
}

<p style="margin-top: 30px;"><a class="button-link" href="#">Read More</a> 
 
</p>