Question

我正在研究freeCodeCamp的Twitch.TV项目，我无法将结果正确地集中在一起。结果的大小和间距都合适，但由于某些原因，整个结果部分是左对齐的，尽管margin: auto和class='text-center'有很多实例。我需要做些什么才能使包含结果的部分以结果为中心？

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();
  });
});

Answer 1

尝试将此添加到您的.row类以均匀分配行项目

sed -i -E "s/(KNOWN_STRING.+)(\".+)(\") /\2$test\3/g" test.h

或者将整行排列在中心

justify-content: space-between;

Div没有正确居中

1 个答案: