Buttons won't centre

HTML & CSS
1

hi

can’t seem to get the social buttons on here to centre

Newsletter

any ideas what I’m doing wrong?

2

You’ve got them all set to float left at the moment. What have you tired to do to center them?

You could set the container to text-align: center, and then remove the floats on the divs around the images to make those icons sit in the center of the layout.

3

I’m using a shortcode for the shocial share buttons so the code I’m seeing is this:

<tr>
                  <td colspan="2" height="30" style="mso-line-height-rule:exactly;" style="text-align:center;"><p style="padding:15;text-decoration:none; text-align:center;">[newssocialshare]</p><br/><p style="padding:0;text-decoration:none;font-size:12px;color:#569cc4; text-align:center; font-family: Arial, sans-serif;"><a href="http://www.umcwales.com" />Ummul Mumineen</a> | Cardiff | CF11 6NJ | info@umcwales.com</p><p style="padding:0;text-decoration:none;font-size:12px;color:#569cc4; text-align:center; font-family: Arial, sans-serif;">[newsunsubscribe] </p></td>
                </tr>

I’ve tried placing text-align:center in there but not working. As you said, because of the floats ( embedded in the shortcode ) so not sure how to work around that

4

I really would advise to ditch the short code. What kind of theme hard codes CSS into each tag anyway? Good short code should allow you to add classes to your tags , instead of writing inline CSS ( which is IMPOSSIBLE to override).

oh, on a different note: having DIV’s inside of Ps is NOT valid code :/.

I do have one suggestion, altho is not particularly graceful… but desperate times…

.fList{ text-align: center;   }
.fList > div {position: relative; left:  50%;   }
.fList > b {display:block; text-align: center}
.fList > div img { position:relative; left:-400% ; display:block}

you will want to find :


<div   style="text-align:left; text-decoration:none; display:block;" ><b>Share This Email</b>

and add class=“fList” to that div.
You may also want to get rid of the BR after the B tag, or at least hide it with CSS :


.fList > BR { display:none; }

Move the colon inside the B tag.

If it’s important that it’s isnt bolded then, wrap it in a span and add this line of CSS

. 
.fList > b span {font-weight :normal}

hope that helps

5

Yes, that is really helpful and insigtful. I’m gong to do this and let you know how I get on
thanks very much