0

我想在页面中间有一列相同的对象中心。对象 id 是：总分，容器 id 是：结果。我尝试使用 flex 但我无法弄清楚如何以任何方式将其居中。我尝试使用 align-content:center 和 justify-content: center 但它们似乎没有做任何事情。为什么？我只附上了css和html。所以不允许我附上整个代码。

@import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);

body {
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}
h1 {
  font-weight: 300;
  margin: 0px;
  padding: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input[type="radio"] {
  height: 1.6em;
  width: 1.6em;
}
button {
  font-family: "Work Sans", sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin: 20px 10px;
  z-index: 3;
  display: block;
  font-size: 2em;
}
button:hover {
  background-color: #38a;
}
.question {
  font-size: 3em;
  margin-bottom: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
  font-size: 3em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.answers label {
  display: block;
  margin-bottom: 10px;
}

.slide {
  position: static;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  display: none;
}
.active-slide {
  display: block;
  z-index: 2;
}
.quiz-container {
  position: static;
  height: auto;
  margin-top: 40px;
}

#results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 10%;
}

#total-score {
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  width: 100%;
  height: 100%;
  background: rgb(255, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 140, 0, 1) 50%,
    rgba(50, 205, 50, 1) 100%
  );
}

@media (min-width: 500px) {
  body {
    font-size: 18px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="QuizTransition.css">
  <meta name="viewport" content="width=device-width" />
</head>

<body>
  <div class="container">
    <div>
      <h1 id="question-numer">
        Intrebarea numarul: 
      </h1>
    </div>
    <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">Intrebarea precedenta</button>
    <button id="next">Urmatoare intrebare</button>
  </div>
  <div id="results">
    <div id="total-score">
    </div>
    <div id="total-score">
    </div>
    <div id="total-score">
    </div>
  </div>
  <script src="QuizLogic.js"></script>
  </div>
</body>

</html>

4

4 回答 4

0

这将解决您的问题。谢谢

#results {
  display: flex;
  flex-direction: column;
  justify-content:center;
  align-items: center;
  width: 100%;
  /* background:olive; */
}

#total-score {
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  width: 10%;
  height: 100%;
  background: rgb(255, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 140, 0, 1) 50%,
    rgba(50, 205, 50, 1) 100%
  );
}
于 2020-05-04T18:24:32.360 回答
0

首先，您不应该在多个元素中使用相同的 id。它应该是独一无二的。#results您可以将其设置为全宽并使子级更小，而不是使包装器更.total-score小。或者，您可以用另一个容器包裹孩子并将其居中。

尝试将您的代码更改为以下内容：

body {
  font-size: 12px;
  font-family: "Work Sans", sans-serif;
  color: #333;
  font-weight: 300;
  text-align: center;
  background-color: #f8f6f0;
}
h1 {
  font-weight: 300;
  margin: 0px;
  padding: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input[type="radio"] {
  height: 1.6em;
  width: 1.6em;
}
button {
  font-family: "Work Sans", sans-serif;
  font-size: 22px;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 20px;
  cursor: pointer;
  margin: 20px 10px;
  z-index: 3;
  display: block;
  font-size: 2em;
}
button:hover {
  background-color: #38a;
}
.question {
  font-size: 3em;
  margin-bottom: 10px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.answers {
  margin-bottom: 20px;
  text-align: left;
  display: inline-block;
  font-size: 3em;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.answers label {
  display: block;
  margin-bottom: 10px;
}

.slide {
  position: static;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 1;
  display: none;
}
.active-slide {
  display: block;
  z-index: 2;
}
.quiz-container {
  position: static;
  height: auto;
  margin-top: 40px;
}

#results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.total-score {
  padding-top: 10px; /* Add top padding */
  padding-bottom: 10px; /* Add bottom padding */
  width: 10%;
  height: 100%;
  background: rgb(255, 0, 0);
  background: linear-gradient(
    90deg,
    rgba(255, 0, 0, 1) 0%,
    rgba(255, 140, 0, 1) 50%,
    rgba(50, 205, 50, 1) 100%
  );
}

@media (min-width: 500px) {
  body {
    font-size: 18px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="QuizTransition.css">
  <meta name="viewport" content="width=device-width" />
</head>

<body>
  <div class="container">
    <div>
      <h1 id="question-numer">
        Intrebarea numarul: 
      </h1>
    </div>
    <div class="quiz-container">
      <div id="quiz"></div>
    </div>
    <button id="previous">Intrebarea precedenta</button>
    <button id="next">Urmatoare intrebare</button>
  </div>
  <div id="results">
    <div class="total-score">
      a
    </div>
    <div class="total-score">
      b
    </div>
    <div class="total-score">
      c
    </div>
  </div>
  <script src="QuizLogic.js"></script>
  </div>
</body>

</html>

于 2020-05-04T18:15:28.187 回答
0

我认为您需要将#result标识符居中。

#results {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 10%;
}

#results div {
  width: 100px;
  height: 100px;
}
于 2020-05-04T18:20:03.693 回答
0

  1. 需要为元素分配、、或position的值才能发挥作用。absoluterelativefixedstickyz-index

  2. Flex 容器是用于指代被分配的元素的术语display: flex。如果您需要将其后代元素（称为弹性项目）水平居中，请分配弹性容器justify-content: center。如果您需要将弹性项目垂直堆叠，请指定弹性容器flex-direction: column或flex-flow: column{nowrap或wrap}

  3. 我修改了......好吧，因为作为一个滑块，如果您继续使用原始代码，它将非常有问题。可以通过查看处理.total-score.

@import url(https://fonts.googleapis.com/css?family=Work + Sans:300, 600);
:root,
body {
  width: 100%;
  height: 100%;
  font: 300 12px/1.5 "Work Sans", sans-serif;
  color: #333;
  text-align: center;
  background-color: #f8f6f0;
  user-select: none;
}

body {
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0;
}

input,
button {
  font: inherit;
  font-size: 1rem;
}

.container {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 10px auto;
}

h1 {
  font-weight: 300;
  margin-bottom: 20px;
}

.quiz {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  justify-content: spacer-between;
  align-items: center;
  width: 100%;
  height: 100%;
}

.slide {
  position: absolute;
  left: 0;
  top: -20px;
  width: 90%;
  min-height: max-content;
  z-index: -1;
  display: none;
}

.slide.active {
  display: block;
  z-index: 0;
  background: #fff;
}

.slide p,
.slide ol,
.slide [type=radio] {
  font-size: 1.25rem;
  text-align: left;
}

.slide p {
  text-indent: 30px;
  margin: 0 auto;
}

.slide ol {
  margin: 0 auto;
  list-style-type: none;
  list-style-position: outside;
}

.slide ol label::before {
  content: attr(for)'. ';
}

.slide [type=radio] {
  width: 1.4rem;
  height: 1.4rem;
}

.slide [type=radio],
.slide label {
  display: inline-block;
  line-height: 18px;
  height: 18px;
  vertical-align: middle;
}

fieldset {
  border: 0;
}

button {
  font-size: 1.75rem;
  background-color: #279;
  color: #fff;
  border: 0px;
  border-radius: 3px;
  padding: 1px 5px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
}

button:hover {
  background-color: #38a;
}

.next,
.prev {
  position: absolute;
  z-index: 1;
  top: 4rem
}

.prev {
  left: 0;
}

.next {
  right: 35px;
}

.total-score {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 0px;
  padding-bottom: 10px;
  background: linear-gradient( 90deg, rgba(255, 0, 0, 1) 0%, rgba(255, 140, 0, 1) 50%, rgba(50, 205, 50, 1) 100%);
  color: navy;
}

.total-score output,
.total-score b {
  display: inline-block;
  font-size: 1.5rem;
}

.total-score label {
  width: 50%;
  margin-bottom: -5px;
}

.total-score b {
  width: 8ch;
  text-align: left;
}

.total-score output {
  width: 4ch;
  font-family: Consolas;
  text-align: right;
}

@media (min-width: 500px) {
   :root,
  body {
    font-size: 18px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <form class="container">
    <h1>Quiz Question <output id='number'>1</output></h1>
    <fieldset class="quiz">

      <button class="prev" type='button'>&#9664;</button>
      <fieldset class='slide active' data-num='1'>
        <p class='question'>This is a question?</p>
        <ol class='choice'>
          <li><input id='a' name='pick' type='radio' value='0'> <label for='a'>This is choice A</label></li>
          <li><input id='b' name='pick' type='radio' value='0'> <label for='b'>This is choice B</label></li>
          <li><input id='c' name='pick' type='radio' value='1'> <label for='c'>This is choice C and is correct (value = '1')</label></li>
          <li><input id='d' name='pick' type='radio' value='0'> <label for='d'>This is choice D</label></li>
        </ol>
      </fieldset>

      <button class="next" type='button'>&#9654;</button>
    </fieldset>

    <fieldset class='total-score'>
      <label><b>Correct:</b> <output id="correct">0</output></label>
      <label><b>Total:</b> <output id="total">0</output></label>
      <label><b>Score:</b> <output id="score">0</output></label>
    </fieldset>
  </form>
</body>

</html>

于 2020-05-04T20:55:15.663 回答