CODEWITHSUNDEEP
cssbuttonalignmenthtml
JorgeeFG
JorgeeFG

Reputation: 5961

HTML-CSS: span inside button aligning right

I am having trouble with the alignment of a span contained within a button tag.

I have already done something like this before and it worked. In fact, it's the same css but different sizes.

The problem is that the containing span seems to be aligning to the right.

enter image description here

CSS:

#closePreviewBtn {
    position: absolute;
    height: 24px;
    width: 24px;
    right: 0;
    background: #B9DEFD;
    border-top: solid 1px #333333;
    border-left: solid 1px#333333;
    border-right: solid 1px #333333;
    border-bottom: solid 1px #333333;
    border-radius: 4px;
}

#closePreviewBtn .close {
    display: inline-block;
    position: relative;
    height: 20px;
    width: 20px;
    background: url(../imagenes/close.png) no-repeat center;
    padding: 0;
    /*right: 2px; 
    bottom: 1px;*/ //This fixes the problem but it's manual
}

HTML:

<html>
<body>
<button id="closePreviewBtn" name="closePreviewBtn"><span class="close"></span></button>
</body>
</html>

Thanks a lot!

Upvotes: 1

Views: 23998

Answers (3)

Matt Johnston
Matt Johnston

Reputation: 412

Simple fix - seems like the button has a padding by default. Just set it to 0:

#closePreviewBtn {
  padding: 0;
}

Now you can position however you want - maybe adding a margin to the span if you want to move it around.

Hope that helps you,

Upvotes: 3

JorgeeFG
JorgeeFG

Reputation: 5961

I noticed that the button still has some padding after resizing it to 10px. I found no way to set that space off.

The solution i've foud to center it was removing the button height and width, because it will expand to wrap the span and it will be centered.

For some weird thing, it works for small buttons. But for bigger buttons like 30px x 50px it will just be fine to set height and width, or at least the padding is very very hard to notice if there's some.

Upvotes: 0

j08691
j08691

Reputation: 207900

In your #closePreviewBtn rule, remove the right:0;. Setting the position to absolute and right to zero will take the element out of the document flow and position it as far to the right as possible.

jsFiddle example

Upvotes: 0

Related Questions