0

This is just snippet of my code. I can't seem to lock the image inside the div, if i set a margin-top: 50% it just flows out of the div. How do I stop that? Also I want to set a the image at dead center of the div that it is contained in.

var twitchArr = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

var dataArray;
twitchArr.forEach(function(twitch) {
      $.getJSON('https://api.twitch.tv/kraken/streams/' + twitch + '?client_id=lgiuraoc2wbg635m7ewteblxg38n4b', function(data) {
            console.log(data.stream); /*just for checking*/
            if (data.stream !== null) {
              forOnline(data.stream.channel.logo, data.stream.channel.game, data.stream.channel.status);

              function forOnline(img, gameName, description) {
                var para = '<div class="off">' +
                  '<img id="mainImg" src=' + img + '>' + '</div>';
                var para1 = '<div class="off1">' + '<p id="textovo">' + gameName + ": " + description + '</p>' + '</div>';

                $(".imgFirst").append(para);
                $(".textSecond").append(para1);
              }
            } else {
#mainImg {
  border-radius: 100%;
  border: 0 solid white;
  width: 60%;
  height: 80%;
  position: relative;
  margin-top: 40px;
}


/*adjusting the image only*/

.off,
.off1,
.off2,
.off3 {
  height: 6em;
  padding: 0 0 0 0;
  margin-top: 0em;
  margin-bottom: .3em;
}

.off {
  max-width: 99px;
  max-height: 83px;
}
<div class='container-fluid' id=onlyForOnline>
  <div class="row">
    <div class="col-xs-2 imgFirst removePadding">

    </div>

    <div class="col-xs-10 textSecond removePadding">

    </div>
  </div>
</div>
user2763557
  • 441
  • 3
  • 13
  • Please add a minimal *working* code snippet that can reproduce the problem. Your script doesn't run.. – Rocks Mar 10 '18 at 17:32
  • 2
    Possible duplicate of [How to vertically align an image inside a div?](https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div) – Anzil khaN Mar 10 '18 at 17:35

3 Answers3

0

I am not too sure about your problem but I think removing the margin-top and adding object-fit and object-position may solve your problem.

Try the following CSS

.off{
   max-width: 99px;
   max-height: 83px;
   object-fit: contain;
   object-position: center;
}

remove margin-top from #main-img

Rajan Benipuri
  • 1,587
  • 1
  • 5
  • 18
0
  1. It's because your image is bigger than 50% of the div height.
  2. Use Calc: margin: calc((100% / 2) - 10px); where 10px is half the width of the image.

div{
  display: block;
  width: 200px; //For testing
  height: 200px; //For testing
  background-color:grey; //For testing
}

#mainImg {
    margin: calc((100% / 2) - 10px);
    width: 20px; //For testing
    height: 20px; //For testing
}
<div>
     <img src="http://doesnotexist.com/img" id="mainImg">
</div>
Orry
  • 643
  • 6
  • 19
-1

I before time used css class. Please reference it.

.valign-middle {position: relative; float: left; display: inline-block; width: 100%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%);}
rubyshine72
  • 132
  • 1
  • 6