CODEWITHSUNDEEP
html
G. Elliott
G. Elliott

Reputation: 13

Aligning HTML Buttons Horizontally (Not Using CSS)

I'm writing an email campaign in Ascendify and need to center 5 html linked buttons horizontally.I do not have access to the CSS, so I need to just do it with html code. I'm really struggling in figuring this out, any feedback would be appreciated. Here's the code:

    <div id="buttonGroup">
<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./engineering/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Engineering</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./engineering/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Engineering</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./hr-recruiting/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">HR & Recruiting</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./hr-recruiting/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">HR &amp; Recruiting</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./product-design/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Product & Design</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./product-design/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Product &amp; Design</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./sales-marketing/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Sales & Marketing</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./sales-marketing/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Sales &amp; Marketing</a></div>

<div style="text-align: center;">&nbsp;</div>

<div style="text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./women-tech/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Women In Tech</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./women-tech/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Women In Tech</a></div>

Upvotes: 1

Views: 831

Answers (4)

Pedro Chiiip
Pedro Chiiip

Reputation: 188

You should add a display: inline-block; to your div's style inline. That way, for each of your divs, you just have to add this style tag, so it would be something like this:

 <div style="display: inline-block; text-align: center;">&nbsp;</div>

You have to do it in all of your divs, otherwise it won't work.

In your code, it would be like this:

<div id="buttonGroup" style="text-align:center;">
<div style="display: inline-block; text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./engineering/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Engineering</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./engineering/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Engineering</a></div>

<div style="display: inline-block; text-align: center;">&nbsp;</div>

<div style="display: inline-block; text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./hr-recruiting/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">HR & Recruiting</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./hr-recruiting/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">HR &amp; Recruiting</a></div>

<div style="display: inline-block; text-align: center;">&nbsp;</div>

<div style="display: inline-block;text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./product-design/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Product & Design</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./product-design/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Product &amp; Design</a></div>
</div>

<div style="text-align: center;">&nbsp;</div>

<div id="buttonGroup" style="text-align:center;">

<div style="display: inline-block;text-align: center;">&nbsp;</div>

<div style="display: inline-block;text-align: center;"><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./sales-marketing/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
 <w:anchorlock></w:anchorlock>
 <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Sales & Marketing</center>
</v:roundrect>
   <![endif]--><a href="http://careers.grayscalable.com./sales-marketing/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Sales &amp; Marketing</a></div>

<div style="display: inline-block;text-align: center;">&nbsp;</div>
<div style="display: inline-block;text-align: center;"><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./women-tech/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
<w:anchorlock></w:anchorlock>
<center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Women In Tech</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./women-tech/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Women In Tech</a></div>
</div>

You can learn more about the display style in here: https://www.w3schools.com/cssref/pr_class_display.asp

Upvotes: 0

Michael
Michael

Reputation: 953

You currently have 5 buttons stacked on top of each other because each anchor is wrapped in a div, which is display:block by default, meaning it fills the entire horizontal space for its line.

I would either remove the div tags wrapping the anchors altogether and just have 5 anchor tags next to each other, or change the div tags to span tags, which are inline by default.

You can also remove the extraneous div tags with non-breaking spaces and use style="margin-right: 10px;" (or whatever value looks good) on each anchor or wrapping span to give space between the anchors.

Also, you can move the "text-align: center" style to the outermost wrapping div and it will center all the buttons and their text for you without having to do that on each child element. 

    <div id="buttonGroup" style="text-align: center;">
<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./engineering/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Engineering</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./engineering/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Engineering</a></span>

<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./hr-recruiting/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">HR & Recruiting</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./hr-recruiting/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">HR &amp; Recruiting</a></span>

<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./product-design/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Product & Design</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./product-design/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Product &amp; Design</a></span>

<span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./sales-marketing/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Sales & Marketing</center>
  </v:roundrect>
  <![endif]--><a href="http://careers.grayscalable.com./sales-marketing/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Sales &amp; Marketing</a></span>
  
  <span><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://careers.grayscalable.com./women-tech/signup" style="height:40px;v-text-anchor:middle;width:125px;" arcsize="10%" strokecolor="#1393ec" fillcolor="#219bed">
    <w:anchorlock></w:anchorlock>
    <center style="color:#ffffff;font-family:sans-serif;font-size:13px;font-weight:bold;">Women In Tech</center>
  </v:roundrect>
<![endif]--><a href="http://careers.grayscalable.com./women-tech/signup" style="background-color:#219bed;border:1px solid #1393ec;border-radius:4px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;mso-hide:all;">Women In Tech</a></span>

Upvotes: 1

Naga Sai A
Naga Sai A

Reputation: 10975

Twop options for achiving expeccted result 

<div style="text-align: center;float:left"

Other option using display:inline as mentioned by Blaze349

Codepen - https://codepen.io/nagasai/pen/pPWJVm

Upvotes: 1

Blaze349
Blaze349

Reputation: 425

Add a style attribute

<button style='display: inline-block;'> </button>

Upvotes: 1

Related Questions