-2
Ich arbeite an FreeCodeCamp Twitch.TV Projekt, und ich kann nicht die Ergebnisse richtig zentrieren. Die Ergebnisse sind richtig bemessen und beabstandet, aber aus irgendeinem Grund ist der gesamte Ergebnisabschnitt linksbündig, trotz vieler Instanzen von margin: auto und class='text-center'. Was muss ich tun, damit der Abschnitt, der die Ergebnisse enthält, die Ergebnisse in das Zentrum stellt?Divs nicht richtig zentriert
HTML:
<html>
<head>
<title>Twitch.tv Guide</title>
</head>
<body>
<div class='container-fluid'>
<div class='content'>
<div class='row'>
<div class='col-12 text-center'>
<h1 class='text-center header'>Twitch.tv Guide</h1>
</div>
</div>
<div class='row menu'>
<div class='col-4 text-center'>
<button class='btn all-btn'>All</button>
<button class='btn online-btn'>Online</button>
<button class='btn offline-btn'>Offline</button>
</div>
</div>
<div class='row results text-center'>
</div>
</div>
</div>
</body>
</html>
CSS:
html, body, .container-fluid {
background: black;
padding: 0;
margin: 0;
width: 100%;
}
body {
padding: 5em;
}
.container-fluid div {
}
.header {
width: 8.2em;
padding: .25em;
margin: 0 auto 1em auto;
background: #643FA5;
color: white;
box-shadow: 0 0 5px 0 white;
}
img {
width: 5em;
height: 5em;
border-radius: 50%;
margin: auto;
box-shadow: 0 0 5px 0 white;
}
.menu {
margin: auto;
padding: 0;
}
button {
margin: .125em auto;
width: 5em;
background: #643FA5;
color: white;
box-shadow: 0 0 5px 0 white;
}
.online, .offline {
margin: 1em auto;
width: 18em;
height: 15em;
padding: .5em;
box-shadow: 0 0 5px 0 white;
}
a, a:hover {
text-decoration: none;
}
.online:hover, .offline:hover, button:hover {
box-shadow: 0 0 25px 0 white;
-webkit-transition: box-shadow .25s;
-moz-transition: box-shadow .25s;
-ms-transition: box-shadow .25s;
-o-transition: box-shadow .25s;
transition: box-shadow .25s;
}
.online {
background: rgb(100, 63, 165);
color: white;
}
.offline {
background: #392B54;
background: rgba(100, 63, 165, .5);
color: white;
}
h3 {
margin: auto;
display: table-cell;
}
h5 {
margin: 1em auto 0 auto;
display: table-cell;
}
.results {
justify-content: space-around;
}
JS:
var channels = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas",
"Crayator",
"shroud",
"C9Sneaky",
"nl_Kripp",
"Vinesauce",
"aXtLOL",
"Reckful",
"GarenaTW",
"OGN_LoL",
"LCK1",
"ThijsHS",
"Anthony_Kongphan",
"Grimmmz"
];
channels.sort();
function getChannelInfo() {
function URL(type, name) {
return (
"https://wind-bow.gomix.me/twitch-api/" +
type +
"/" +
name +
"?callback=?"
);
}
channels.forEach(function(channel) {
$.getJSON(URL("streams", channel), function(data) {
var game;
var status;
var logo;
if (data.stream == null) {
game = "Offline";
status = "offline";
} else if (data.stream == undefined) {
game = "Account Closed";
status = "offline";
} else if (data.stream) {
game = data.stream.game;
status = "online";
}
$.getJSON(URL("channels", channel), function(data) {
if (status == "online" && data.logo) {
logo = data.logo;
var html = "";
html += "<a href='https://www.twitch.tv/" + channel + "' target='_blank'>";
html += "<div class='col-xs-12 col-sm-6 col-md-4 col-lg-3'>";
html += "<div class='row text-center " + status + " " + channel + "'>";
html += "<img src='" + logo + "' class='col-2.5 img-responsive text-center logo'>";
html += "<h3 class='col-12 text-center'>" + channel + "</h3>";
html += "<h5 class='col-12 text-center'>" + game + "</h5>";
html += "</div>";
html += "</div>"
html += "</a>";
$(".results").prepend(html);
} else if (status == "offline" && data.logo) {
logo = data.logo;
var html = "";
html += "<a href='https://www.twitch.tv/" + channel + "' target='_blank'>";
html += "<div class='col-xs-12 col-sm-6 col-md-4 col-lg-3 boxes'>";
html += "<div class='row text-center " + status + " " + channel + "'>";
html += "<img src='" + logo + "' class='col-2.5 img-responsive text-center logo'>";
html += "<h3 class='col-12 text-center'>" + channel + "</h3>";
html += "<h5 class='col-12 text-center'>" + game + "</h5>";
html += "</div>";
html += "</div>"
html += "</a>";
$(".results").append(html);
}
});
});
});
}
$(document).ready(function() {
getChannelInfo();
$(".all-btn").on("click", function() {
$(".online").show();
$(".offline").show();
});
$(".online-btn").on("click", function() {
$(".online").show();
$(".offline").hide();
});
$(".offline-btn").on("click", function() {
$(".online").hide();
$(".offline").show();
});
});
Sie erforderlich auszurichten sind Markup hier nicht von einem fremden Ort zu schreiben, dass niemand in der Zukunft helfen, ändern oder verschwinden kann: [MCVE] – Rob
@ Rob Das wusste ich nicht. Danke für die Information. Ich bin mir nicht sicher über den "minimalen" Teil, aber ich habe meinen Code hier hineingesteckt. Wie auch immer, das iSZ hat meine Lösung gefunden. – alton1231