水平對齊ReadMore按鈕

我想請求某人請引導我如何通過名稱Read More Horizontally完美對齊三個按鈕。水平對齊ReadMore按鈕

網站鏈接： http://advancedspinecareolympia.com/

PSD我試圖模仿：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>

來源

2015-02-10 user3251334

請告訴我們你的代碼。 – belwood 2015-02-10 01:56:53

歡迎來到Stack Overflow！雖然我們很樂意回答任何問題，但這不是讓人們爲您編寫代碼的地方。請發佈你的代碼，描述你已經嘗試了什麼，什麼不起作用，並縮小你的問題。 – 2015-02-10 02:08:51

由於問題不是關於代碼非常具體的，我會基於什麼人給一個通用的答案可以通過您的網站上的Chrome開發者控制檯進行檢查。

我認爲可以幫助是：

使含三個申報單（約/目標/理念）位置的div：相對
使按鈕的位置是：絕對的（他們將引用包含div ）
給他們底部：0樣式，所以他們從包含div的底部開始 - 或者任何其他值，以便它們可以抵消。

來源

2015-02-10 02:40:20

將此代碼添加到您的樣式中，然後將font-family用作您的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>

來源

2015-02-10 06:45:34

水平對齊ReadMore按鈕

回答

相關問題