Как выровнять контент-центр по середине строки

Question

Я пытаюсь выровнять 3 кнопки в середине строки.Использование CSS и HTML для достижения результата

Что я сделал:

1 / Css:

.strike {
    display: block;
    text-align: center;
    overflow: hidden;
    white-space: nowrap; 
}

.strike > span {
    position: relative;
    display: inline-block;
}

.strike > span:before,
.strike > span:after {
    content: "";
    position: absolute;
    top: 50%;
    width: 9999px;
    height: 1px;
    background: white;
}

.strike > span:before {
    right: 100%;
    margin-right: 15px;
}

.strike > span:after {
    left: 100%;
    margin-left: 15px;
}

2 / html:

<div class="row">
    <div class="col-12 ">
        <div class="strike">
            <span>
                <button class="btn btn-info btn-just-icon"
                    style="background-color: #1da1f2">
                    <i class="fab fa-twitter"></i>
                </button>
                <button class="btn btn-just-icon"
                    style="background-color: #3B5998">
                    <i class="fab fa-facebook-f"></i>
                </button>
                <button class="btn btn-just-icon"
                    style="background-color: #0084ff">
                    <i class="fab fa-facebook-messenger"></i>
                </button>
            </span>
        </div>
    </div>
</div>

Результат: 3 кнопки находятся в середине строки, но они не выровнены.

Что я ожидал:

3 кнопкивыровнять вертикальный центр с линией.

Любое предложение приветствуется

**** РЕДАКТИРОВАТЬ *****

Я обновлю результат из предложений здесь

1 / From @ Gerard

Answer 1

Не совсем понятно, о чем вы спрашиваете.Но это то, что вам нужно?

.strike {
  display: block;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
}

.strike>span {
  position: relative;
  display: inline-block;
}

.strike>span:before,
.strike>span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: #000;
}

.strike>span:before {
  right: 100%;
  margin-right: 15px;
}

.strike>span:after {
  left: 100%;
  margin-left: 15px;
}

button {
  width: 40px;
  border-radius: 22px !important;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 ">
    <br/>
    <div class="strike">
      <span>
                <button class="btn btn-info btn-just-icon"
                    style="background-color: #1da1f2">
                    <i class="fa fa-twitter"></i>
                </button>
                <button class="btn btn-just-icon"
                    style="background-color: #0084ff">
                    <i class="fab fa-facebook-messenger" style="color: white;"></i>
                </button>
                <button class="btn btn-just-icon"
                    style="background-color: #3B5998">
                    <i class="fa fa-facebook-f" style="color: white;"></i>
                </button>
            </span>
    </div>
  </div>
</div>

Answer 2

Попробуйте это vertical-align: middle;

.strike > span button {
    vertical-align: middle;
}

Answer 3

Я бы предпочел использовать flexbox , потому что он отзывчивый по своей природе.

.strike {
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  border: thin solid red; /* for visibility only */
}

.strike:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 9999px;
  height: 1px;
  background: gray;
  z-index: -1;
}

.strike>button {
  min-width: 40px;
  border-radius: 50%;
}

.btn.tw {
  background-color: #1da1f2
}

.btn.fb {
  background-color: #3B5998
}

.btn.ms {
  background-color: #0084ff
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" rel="stylesheet" />
<div class="row">
  <div class="col-12 ">
    <div class="strike">
      <button class="btn tw">
        <i class="fab fa-twitter"></i>
      </button>
      <button class="btn fb">
        <i class="fab fa-facebook-f"></i>
      </button>
      <button class="btn ms">
        <i class="fab fa-facebook-messenger"></i>
      </button>
    </div>
  </div>
</div>

Answer 4

Попробуйте с этим:

.strike > span{
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
}

с кодом фрагмента, вам было бы легче помочь, но попробуйте с этим кодом ...