How do I center an tag vertically in a

Question

I have a button tag like this:

<button id="submit" style="height: 30px;">
   <i id="loginLoadIcon" class="spinnerIcon"></i>
   <span>Log in</span>
</button>

Which uses css like this:

.spinnerIcon {
    width: 25px;
    height: 25px;
    background: transparent url('images/spinnerIcon.png') repeat-x 0 0;
}

How do I center the i tag vertically in the button tag? The button may be resized and the image must keep centered vertically.

@JonathanNewmuis... Seems this SO article http://stackoverflow.com/questions/11135261/i-tag-for-icons seems to state the `i` tag is acceptable for icons, even though it is commonly considered bad practice. — Charlie74, Dec 16 '13 at 22:27
Is an inherited html code. The unique reason is because it gives the idea of icon. See Charlie 74 answer. — dovahkiin, Dec 16 '13 at 22:27

score 2 · Accepted Answer · answered Dec 16 '13 at 22:32

2

How about:

#submit{
  position: relative;
}

#submit::before{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 25px;
  height: 100%;
  background: transparent url('images/spinnerIcon.png') no-repeat left center;
}

?

And no need for <i> anymore. You can probably loose the <span> tag too, but I don't know how does the rest of your CSS look :)

answered Dec 16 '13 at 22:32

nice ass

16,471
7
50
89

I kept the use of tag, with the selector as .spinnerIcon and specified display: block to it with your code. Thanks. – dovahkiin Dec 17 '13 at 03:46

score 1 · Answer 2 · answered Dec 16 '13 at 22:25

CSS vertical-align:middle will center it for you.

<i style="vertical-align:middle" id="loginLoadIcon" class="spinnerIcon"></i>

You can also do it like this though:

HTML

<button id="submit" style="height: 30px;">
   Log in
</button>

CSS

button{
    font-weight:italic;
}

score 1 · Answer 3 · answered Dec 16 '13 at 22:31

1

button#submit {
  height: 30px;
  line-height: 30px;
}

.spinnerIcon {
    width: 25px;
    height: 25px;
    background: transparent url('images/spinnerIcon.png') repeat-x 0 0;
}

this should do it.

answered Dec 16 '13 at 22:31

CodeBrauer

2,690
1
26
51

How do I center an tag vertically in a tag?

3 Answers3

How do I center an tag vertically in a