Question

I’m trying to create a styled button that has a single character centred inside it.

I’m using “border-image” and “border-width” to create a button that I could stretch to larger content (that ability has been lost in this simplified scenario…).

My problem is this: when the button is small (specifically, when the button is little more than 2*border-width), the content is not centred. I’ve tried ‘conventional’ techniques like margin: 0 auto; but don’t seem to be having any joy. Using a dumb-button class without these border properties I can get what I want (see below)

This neatly demonstrates the problem. I would like the characters centred in the styled buttons:

http://jsfiddle.net/rjmLy/

(works in Chrome/Safari, and this is targeting Webkit only)
(example of the themed button from http://girliemac.com/blog/2011/07/29/five-css-tricks-used-in-enyo)

My CSS is as follows:

.fancy-button {
    border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
    border-width: 0 14px;
    box-sizing: border-box;
    font-size: 16px;
    height: 37px;
    line-height:37px;
    text-align: center;
    margin: 0 auto;
    width: 28px;
}
.centerme {
    position:relative;
    margin:0 auto;
}
.dumb-button {
    font-size: 16px;
    height: 37px;
    line-height: 37px;
    text-align: center;
    width: 28px;
    background-color: red;
    margin: 0 auto;
}

​

The HTML looks like this. The centerme class was an attempt to try centring a new div on top of the old shape. It doesn’t work for me. The dumb-button versions look correct (but dull…)

<div class="fancy-button">I</div>
<div class="fancy-button">W</div>
<div class="fancy-button"><div class="centerme">W</div></div>

<div class="dumb-button">I</div>
<div class="dumb-button">W</div>
<div class="dumb-button"><div class="centerme">W</div></div>

Any help would be greatly appreciated.

Answer 1

You’re building the button with a CSS3 Sprite and a border-image attribute where the start of the left side of the button is 14px wide and the start of the right side of the button is 14px wide.

In your CSS you set the width of the button to 28px: The problem is that this leaves no room for any text that you put in the middle of the button and therefore the letter is overlapping onto part of the border-image.

In order to fix this you could simply increase the width of the button to about 42px or larger.

.fancy-button {
  border-image: url(http://girliemac.com/sandbox/images/alert-button.png) 0 14 111 14 fill repeat repeat;
  border-width: 0 14px;
  box-sizing: border-box;
  font-size: 16px;
  height: 37px;
  line-height:37px;
  text-align: center;
  margin: 0 auto;
  width: 42px;
}

Here’s a working fiddle: http://jsfiddle.net/QYrzS/

But, if you really want to keep the images that small – things are a little more difficult. One option is wrapping the content of each button (the single letter) in a <div> and then manually setting the margin for each. For example:

HTML

<div class="fancy-button"><div class="centerme">W</div></div>

CSS

.centerme {
  margin-left:-7px;
}

This is kind of hacky and will need to be manually adjusted (since each letter is a different width).

Here’s a working demo: http://jsfiddle.net/rjmLy/

Notice that the letter i is not centered. You would need to specify the correct margin for the individual <div> that holds that letter in order to fix that.