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>