Home/ Questions/Q 8553733
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T14:43:15+00:00

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

  • 0

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!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0