Сгибание не работает, когда я пытаюсь центрировать объект - PullRequest
Новая
       33

Сгибание не работает, когда я пытаюсь центрировать объект

0 голосов
/ 04 мая 2020

Я хочу, чтобы в середине страницы находился столбец с идентичным центром объекта. идентификатор объекта: итоговый счет, а идентификатор контейнера: результаты. Я пытаюсь использовать 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 ]

0 голосов
/ 04 мая 2020

  1. Элемент должен быть присвоен position со значением absolute, relative, fixed или sticky, чтобы z-index функционировал.

  2. Контейнер Flex - это термин, используемый для обозначения элемента, которому присвоен display: flex. Если вам нужно, чтобы его дочерние элементы (называемые элементами flex) были отцентрированы по горизонтали, присвойте гибкий контейнер justify-content: center. Если вам нужно, чтобы гибкие элементы были сложены вертикально, назначьте гибкий контейнер flex-direction: column или flex-flow: column {nowrap или wrap}

  3. Я обновил ... ну все потому что как слайдер это будет очень проблематично c, если вы продолжите с оригинальным кодом. Решение вашей проблемы (насколько я могу судить, поскольку вопрос был расплывчатым) можно найти, просматривая CSS наборов правил, касающихся .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>
0 голосов
/ 04 мая 2020

Я думаю, вам нужно центрировать #result идентификатор. 

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

#results div {
  width: 100px;
  height: 100px;
}
0 голосов
/ 04 мая 2020

Это исправит вашу проблему. Спасибо 

#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%
  );
}
0 голосов
/ 04 мая 2020

Во-первых, вы не должны использовать один и тот же идентификатор в нескольких элементах. Это должно быть уникальным. Вместо того, чтобы сделать обертку #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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...