'Center bootstrap background button?

I have an issue the + sign of the bootstrap button which isn't centered like in this image :

centered.

I tried to wrap the button with a div with justify-content-center align-content-center text-center classes.

.btn-plus {
  display: inline-block;
  background: url(https://via.placeholder.com/30) center no-repeat;
  background-size: contain;
  width: 30px;
  height: 30px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="d-flex justify-content-center align-content-center text-center m-3">
  <button type="button" class="btn btn-primary btn-plus"></button>
</div>

I tried also adding background-position: center; to the btn-plus in the inspector but neither of what i tried is solving the problem.

How can i fix the problem?

cssbootstrap-4


Solution 1:[1]

try what you did but in the class of your button

.divButton {
   display: flex;
   justify-content: center;
   align-items: center;
}

and set this class to your div. The classes what you provided are css properties.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 OmOursPor

Related Questions