CSS: How to align buttons and text horizontally

Question

I have the following month selector:

It has a left and a right button with the text of the current month inbetween. As you can see it doesn't look ok.

HTML:

<div id="seletor">
        <a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-w" href="#" id="subtrair">subtrair</a>
            <div id="mescorrente"></div>
        <a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar">somar</a>
    </div>

CSS:

#subtrair, #mescorrente, #somar {
    display:inline-block;
    vertical-align:top;
}
#subtrair, #somar {
    margin-top:2px;
}
#mescorrente {
    font-size:20px;
    text-transform:uppercase;
    padding:0 6px; /* optional padding.. */
    margin-bottom:10px;
    white-space: nowrap;

}

I tried all sorts of options in the display settings, like display:table and display:inline but it did not work.

In Chrome Dev Tools, if I uncheck and check again display:inline-block; it works!

What is wrong with this code?

Answer 1

Change the CSS for #mescorrente .

#mescorrente {
  min-width: 200px;
  text-align: center;
}

Answer 2

You have two options that I see here. Either you can create multiple div elements and display them inline, or you could use

<span> 

element, as it is intended to display elements inline natively.

http://www.w3schools.com/tags/tag_span.asp

I would recommend using the span element, as I've had good success using this method, so long as you want them truly inline and not staggered/relatively aligned via script.

Answer 3

You can use this:

<a class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-e" href="#" id="somar" style="float:right;">somar</a>

or

#somar {
margin-top:2px;
float:right;

}

but as long as you use px in your parameters, if the above ways does not help, you can set the distance form the left side like this:

#somar {
margin-top:2px;
left: 150px;

}

Answer 4

Just a slightly different approach - floating the three components left inside the div, then positioning the div - FIDDLE .

Did you want to do anything more with it?

CSS

#seletor {
    width: 300px;
    margin: 30px auto;
}
#subtrair, #mescorrente, #somar {
    float: left;
    vertical-align: top;
    margin-left: 10px;
}
#subtrair, #somar {
    margin-top:2px;
}
#mescorrente {
    font-size: 20px;
    text-transform: uppercase;
    padding:0 6px; /* optional padding.. */
    margin-bottom: 10px;
    white-space: nowrap;

}