5

I am trying to create a small button with a X (font-awesome's <i class="fa fa-close"></i>). I am trying to make it look something like this:

enter image description here

However, I am facing some issues with getting the X centered inside the button.

Here is the markup:

<button class="cart-remove">
  <i class="fa fa-close"></i>
</button>

And the css:

.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center !important;
}

Unfortunately the font-awesome close icon does not center, it appears at the bottom right. How can I fix this? I thought text-align center centers the stuff inside that element?

Thanks

user1354934
  • 8,139
  • 15
  • 50
  • 80
  • It should be centered horizontally. Your button's class doesn't match the class in the css. Could that be the problem? – Cave Johnson Aug 25 '16 at 23:23
  • sorry it should be cart-remove in the button. my bad – user1354934 Aug 25 '16 at 23:24
  • try adding vertical-align:middle; – derloopkat Aug 25 '16 at 23:28
  • I think the problem is your width is too small for the X so it is just overflowing to the right side. If you just change the width to something like 50px, you will see that it is centered. – Cave Johnson Aug 25 '16 at 23:29
  • So you can either: 1) increase the size of the button or 2) decrease the `font-size` of the button so the X becomes smaller. – Cave Johnson Aug 25 '16 at 23:32
  • This thread has already been done. http://stackoverflow.com/questions/17309928/how-to-center-text-vertically-with-a-large-font-awesome-icon -- the fontsize/lineheight is the best one imo – wdfc Aug 26 '16 at 00:03

2 Answers2

3

You can try centering it with flexbox applied to the i element

$('.cart-remove').click(function() {
 var currentCount = $(this).attr('increaseorator');
  var currentCountParsed = parseInt(currentCount);
  var currentWH = currentCountParsed + 20;
  $(this).css({
   'width' : currentWH,
    'height' : currentWH
  });
  $(this).attr('increaseorator', currentWH);  
});
.cart-remove {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #CCC;
    border-radius: 50%;
    color: black;
}
.cart-remove i {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* ignore, styling */
* { outline: 0; }
*::-moz-focus-inner { border: 0; }

.cart-remove {
  border: 1px solid hsla(0, 0%, 0%, 0.5);
  background-color: hsla(0, 0%, 70%, 1);
}
.cart-remove:hover {
  background-color: red; 
}
instructions {
  position: absolute;
  width: 100%;
  left: 50%;  transform: translateX(-50%);
  bottom: 0;
  display: flex;
  justify-content: center;
  padding-bottom: 40px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="cart-remove" style="width: 20px; height: 20px;" increaseorator="20">
  <i class="fa fa-close"></i>
</button>

<instructions>click the x to enlarge, it should remain centered</instructions>

fiddle

https://jsfiddle.net/Hastig/esuxa4b6/2/

Hastig Zusammenstellen
  • 4,286
  • 3
  • 32
  • 45
0

This gets pretty close with only css:

.cart-remove {
    margin:auto;
    text-align:center;
    background-color: #fff;
    border-radius: 50%;
}
Niles Tanner
  • 3,911
  • 2
  • 17
  • 29