How to Center an Inline-Block Element and If So, How

Is it possible to center an inline-block element and if so, how?

Simply set text-align: center; on the container.

Here's a demo.

CSS center display inline block?

The accepted solution wouldn't work for me as I need a child element with display: inline-block to be both horizontally and vertically centered within a 100% width parent.

I used Flexbox's justify-content and align-items properties, which respectively allow you to center elements horizontally and vertically. By setting both to center on the parent, the child element (or even multiple elements!) will be perfectly in the middle.

This solution does not require fixed width, which would have been unsuitable for me as my button's text will change.

Here is a CodePen demo and a snippet of the relevant code below:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

How to center inline-block element with margin

If you use a container with negative margin, you don't need to vary the margin for the endpoints of the rows at different breakpoints and you can just go with inline-block. I set font-size to zero in the container so I can calculate my widths using percents without worrying about white space.

div#wrap {  margin-top: 3em;  border: solid 1px black;  padding: 20px;  text-align: center;}
.block {  display: inline-block;  width: 12.5em;  margin: 20px;  height: 8em;  font-size: 16px;}
.block-container {  margin: -20px;  font-size: 0;}
#block1 {  background: orange;}
#block2 {  background: magenta;}

<div id="wrap">  <div class="block-container">    <div class="block" id="block1"></div>    <div class="block" id="block2"></div>  </div></div>

Aligning inline-block center

Like this? http://jsfiddle.net/bcL023ko/3/
Remove the float:left left and add margin: 0 auto to center the element. Or is it something else that your are looking for?

Center an inline block element with a link inside of a td

You probably shouldn't make your <td> element a button. What I would strongly suggest is to give your <a> the same style as your <td>, then remove the style from the TD and just tell the <td> to text-align:center;.

I've changed the <td> class to something else (.center-inside)

<td id = "button1" class="center-inside" style = "font-size: 14pt; padding: 15px 25px"></td>

And then changed the CSS to to style the button (and added some padding to make it large again)

td.center-inside {
  text-align:center
}
.TableButtonStyle {
    display: inline-block;
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left:auto; 
    margin-right:auto;
    color: white;
    background-color: rgb(240,80,40);
    font-weight: bold;
    padding:20px;
}

Then I added the .TableButtonStyle class to your button in the javascript

 var buttonText1 = "<a class='TableButtonStyle' href=\"javascript: giveButton('"+suggestedAnnualAmt1+"'); onclick:Incr1();\">$"+suggestedAmtPPP1+"</a>";

https://jsbin.com/mezudaciqi/1/edit?html,css,js,output

Aligning inline-block elements horizontally

For inline-block items, you can use vertical-align: top to align siblings to the top.

For evenly spaced widths, you can define a width value percentage within #container div or tell the parent #container to be display: flex (which will also align the items to the top).

#container{  min-height: 200px;  margin:0;  padding:10px;  border:2px solid green;}#container div {  border:2px solid red;  padding:10px;   display: inline-block;  margin:5px auto;  width:120px;  margin:2px auto;  vertical-align: top; /* use on inline-items */}

<section id="container">    <div>        <ul>            <li>Item one</li>            <li>Item two</li>            <li>Item three </li>            <li>Item four</li>            <li>Item five</li>        </ul>    </div>    <div>        <ul>            <li>Item one</li>            <li>Item two</li>            <li>Item three </li>            <li>Item four</li>            <li>Item five</li>            <li>Item six </li>            <li>Item seven</li>            <li>Item eight</li>        </ul>    </div>    <div>        <ul>            <li>Item one</li>            <li>Item two</li>            <li>Item three </li>            <li>Item four</li>            <li>Item five</li>        </ul>    </div>    <div>        <ul>            <li>Item one</li>            <li>Item two</li>            <li>Item three </li>            <li>Item four</li>            <li>Item five</li>            <li>Item six </li>        </ul>    </div>    <div>        <ul>            <li>Item one</li>            <li>Item two</li>            <li>Item three </li>            <li>Item four</li>            <li>Item five</li>        </ul>    </div>
</section>