html - 使用比容器中文本大的图像居中文本

Question

出于某种原因，按钮粘在图像开始位置的顶部。我想把它放在容器的中间。我试图将它与“中心”类放在一起:

position: relative;
top: 50%;
transform: translateY(-50%);

代码:

它现在的样子:

它应该的样子:

HTML:

<div style="background-image: url( './dist/img/background/minecraft.jpg' ); height: 125px;" class="col-md-12">

    <div class="wrapper text-center center">

        <div class="col-lg-5">

            <span style="color: #FFFFFF; font-size: 220%;">

                <img style="width: 100px; display: inline;" src="./dist/img/icon/minecraft.png" />

                Minecraftasdasdsad

            </span>

        </div>

        <div class="col-lg-3"></div>

        <div class="row">

            <div class="col-lg-4">

                <button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green">

                    Start

                </button>

                <button style="margin-left: 10px; color: #FFFFFF; min-width: 100px;" class="btn btn-red">

                    Stop

                </button>

            </div>

        </div>

    </div>

</div>

Answer 1

这是一个使用 flexbox 的实现。

#center {
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  -webkit-align-items: center;
  align-items: center;
}

<div style="background-image: url( 'https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg' ); height: 125px;" class="col-md-12">
<div class="wrapper text-center center">
  <div class="col-lg-5">
  <span style="color: #FFFFFF; font-size: 220%;">
  <img style="width: 100px; display: inline;" src="https://cdn.pixabay.com/photo/2015/11/02/18/34/banner-1018818_960_720.jpg" />
  Minecraftasdasdsad
  </span>
  </div>
  <div class="col-lg-3"></div>
  <div class="row">
    <div id="center">
      <button style="color: #FFFFFF; min-width: 100px;" class="btn btn-green">
      Start
      </button>
      <button style="margin: 10px;color: #FFFFFF; min-width: 100px;" class="btn btn-red">
      Stop
      </button>
    </div>
  </div>
  </div>
</div>