Border are disaligned - Image not properly set (tables)

Question

Hi there I have a problem with my table layout. I am trying to align "LEARN MORE" image under the blue text unfortunately its breaking the next element.

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>

And also the button below is not aligned center instead its aligned to the left

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>

CHECK MY DEMO SO THAT YOU CAN SEE: http://jsfiddle.net/YTvqb/4/

You have used media queries in a table layout....!!! – NoobEditor Nov 22 '13 at 07:10 — NoobEditor, Nov 22 '13 at 07:10

score 0 · Answer 1 · answered Nov 22 '13 at 06:50

You have to add "text-align: center" in .

Please see 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>

score 0 · Answer 2 · answered Nov 22 '13 at 07:22

okay, so you have extensively used the tables in your design, so my suggestion would be to avoid the styling on table elements as it might affect your entire layout.....

For your LEARN MORE link, add this as your inline

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

width can be adjusted in %age as your are considering some level of responsive-effect in your site!
giving display will change the default inline, so you can assign width to it, margin will pull your tag to the center, this is basic to push any tag in center of a page! :)

Border are disaligned - Image not properly set (tables)

2 Answers2