CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Jesse Schokker
Jesse Schokker

Reputation: 896

Center text with an image that is bigger than the text in container

For some reason, the button is sticking to the top of where the image starts. I want to center it in the middle of the container. I am trying to center it with the "center" class: 

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

Code:

What it looks like right now: enter image description here

What it should look like: enter image description here

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>

Upvotes: 0

Views: 49

Answers (1)

Kanstantsin Arlouski
Kanstantsin Arlouski

Reputation: 740

Here is an implementation using 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>

Upvotes: 2

Related Questions