居中文本的圖像大於容器中的文本

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>