CODEWITHSUNDEEP
htmlcsstextfontspositioning
Juuro
Juuro

Reputation: 1687

Positioning text inside a button

I have buttons with text in it which has too much space above it. Is looks like this:

enter image description here

How can I position the text a little bit higher so that it doesn't get sliced by the border of the button?

HTML:

<input type="button" value="a">

Here is my CSS so far:

input[type="button"], input[type="submit"] {
  min-width: 40px;
  height: 25px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
  padding: 0px;
}

The line-height property doesn't change anything, even with the use of !important.

Upvotes: 1

Views: 6029

Answers (2)

user2938649
user2938649

Reputation: 118

If you really want to preserve the fixed width and height of the button and the font size of the text then you could do something like below. This is putting the text in a different div so you can position it on top of the button. If the button is position: relative, the text div is position: absolute, and the HTML is structured so the text div is within the button tag, then it will layer nicely. Also, when done this way the text will move with the button and won't be displaced (if say you give the button a margin: 100px).

<button value="">
    <div id="buttonText">a</div>
</button>

Here is my CSS so far:

<style>
button {
    width: 40px;
    height: 25px;
    margin-right: 10px;
    position: relative;
}

#buttonText
{
    font-size: 30px;
    position: absolute;
    top: -9px;
    left: 9px;
    color: #FFF;
}
</style>

Upvotes: 1

user2938649
user2938649

Reputation: 118

Setting a fixed height will throw the alignment off. Setting the font size will be enough for the div to auto-size and the text will be centered. Try this new css:

input[type="button"], input[type="submit"] {
  min-width: 40px;
  font-size: 30px;
  color: #ffffff;
  margin-right: 10px;
}

Upvotes: 3

Related Questions