CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-4
Androme
Androme

Reputation: 2449

Vertical center font awesome icon

I am trying to create a reusable box, with a delete and edit button as part of the box. However no matter what i try, i can not get it to center the icon horizontal.

.inputBox .content {
  flex: 2;
}

.inputBox .icon {
  flex: 1;
  max-width: 50px;
}
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
  <div class="inputBox d-flex">
    <div class="bg-dark text-white rounded-left p-2 content align-middle">
      <input name="text" placeholder="This is a test" />
      <span>Link text</span>
      <br /> test<br />
    </div>
    <a href="#" class="bg-info text-white p-2 icon">
      <i class="fa fa-edit fa-lg"></i>
    </a>
    <a href="#" class="bg-danger text-white p-2 icon rounded-right">
      <span>
        <i class="fa fa-trash fa-lg"></i>
    </span>
    </a>
  </div>
</div>

Upvotes: 0

Views: 2535

Answers (1)

Bhuwan
Bhuwan

Reputation: 16855

Apply display:flex , align-items:center , justify-content:center to the .icon class...

...or use d-flex align-items-center justify-content-center bootstrap predefined classes in the .icon

Stack Snippet

.inputBox .content {
  flex: 2;
}

.inputBox .icon {
  flex: 1;
  max-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div>
  <div class="inputBox d-flex">
    <div class="bg-dark text-white rounded-left p-2 content align-middle">
      <input name="text" placeholder="This is a test" />
      <span>Link text</span>
      <br /> test<br />
    </div>
    <a href="#" class="bg-info text-white p-2 icon">
      <i class="fa fa-edit fa-lg"></i>
    </a>
    <a href="#" class="bg-danger text-white p-2 icon rounded-right">
      <span>
        <i class="fa fa-trash fa-lg"></i>
    </span>
    </a>
  </div>
</div>

Upvotes: 1

Related Questions