-2
私はfreeCodeCampのTwitch.TVプロジェクトに取り組んでおり、結果を適切に中央に集めることができません。結果は適切なサイズと間隔がありますが、何らかの理由でmargin: autoとclass='text-center'のインスタンスが多数あるにもかかわらず、結果セクション全体が左揃えになっています。結果を含むセクションを結果の中心にするためには何が必要ですか？Divsが正しくセンタリングしていない
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();
});
});
、変更したり、将来的に誰も助けない消えることができない、サードパーティのサイト：[MCVE] – Rob
@Rob私はそれを知らなかった。知らせてくれてありがとうございます。私は「最小限」の部分についてはわかりませんが、ここにコードを入れました。とにかく、iSZは私の解決策を見つけました。 – alton1231