I need assistance in creating a stylish button with a single centered character inside of it.
Currently, I am utilizing "border-image" and "border-width" to design a button that can expand to accommodate larger content. However, when the button size is reduced (specifically, when it is only slightly larger than 2*border-width), the content is not aligned at the center. Despite trying traditional methods like using margin: 0 auto;, I have been unable to resolve this issue. Interestingly, when I utilize a dumb-button class without these border properties, I achieve the desired outcome.
To illustrate the problem, please refer to the example link below:
(Compatible with Chrome/Safari, designed for Webkit browsers only) (Example of themed button from )
My current CSS styling 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 structure is shown below. The centerme class was an attempt to center a new div on top of the existing shape, but it did not yield the desired result. The dumb-button versions appear correctly centered but lack visual appeal.
<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>
Your assistance on this matter would be highly appreciated.