Border disaligned - Изображение неправильно установлено (таблицы)

Question

Привет, у меня есть проблема с моей таблицей. Я пытаюсь выровнять изображение «УЗНАТЬ БОЛЬШЕ» под синим текстом, к сожалению, он разбивает следующий элемент.

SEE IMAGE: http://www.fileswap.com/dl/UDgc1YtJf1/

<table width="600" height="108" border="0" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#3baaff" style="border-left: 1px solid #dadada; border-right: 1px solid #dadada;"> 
      <tr> 
       <td> 
        <p style="color: #fff; padding: 5px 32px 40px 32px; font-family: arial; font-size: 13px; text-align: center;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>  
       </td> 
      </tr> 

     <tr valign="center"> 
       <td style="background-color: #fff;"> <a href="#"> <img class="deviceWidth" src="img/learn-more.png" align="center" alt="" border="0" style=" position: relative; top: -45px; left: -1px; margin 0 auto;" /></a> </td> 
      </tr> 

А также кнопка ниже не находится по центру вместо ее выравниваются по левому

SEE IMAGE: http://www.fileswap.com/dl/pJ5t2ATKx/

<tr> 
          <td align="center" style="padding: 10px;"> 
           <h3 style="font-family: arial; font-size: 15px; color: #7c7b7b;">Product No. 1 </h3> 
           <a href="#"><img width="262" src="img/image1.jpg" alt="" border="0" style="width: 267px" class="deviceWidth" /></a></p> 
           <p style="text-align: center; font-family: arial; color: #7c7b7b; font-size: 12px;"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
          </td> 
         </tr> 

ПРОВЕРИТЬ МОЕ DEMO ТАК, ЧТО ВЫ МОЖЕТЕ ВИДЕТЬ: http://jsfiddle.net/YTvqb/4/

Answer 1

Вы должны добавить «text-align: center» in.

Пожалуйста, см Demo

   <td style="text-align: center;"> 
        <h2 style="color: #3baaff; text-align: center; font-family: 'Pacifico'; margin-top: 30px;"> Check our site for coupons </h2> 
        <p style="color: #7c7b7b; text-align: center; font-size: 12px; text-align: center; font-family: arial; padding: 0 32px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> 
        <a href="#" class="btn" align="center"> LEARN MORE</a> 
       </td> 

Answer 2

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

Для вашего ПОДРОБНЕЕ ссылки, добавьте это в качестве встраиваемого

<a href="#" class="btn" align="center" style="display:block;width:18%;margin:0 auto;height:16px;"> LEARN MORE</a> <br > 

• ширина может быть отрегулирована в% возраста, так как вы рассматриваете некоторый уровень отзывчивого эффекта на вашем сайте!
• display изменит встроенный по умолчанию, поэтому вы можете назначить ему ширину, margin потянет ваш тег в центр, это базовое значение для нажатия любого тега в центре страницы! :)