сделать горизонтальный и вертикальный центр - PullRequest
Новая
       6

сделать горизонтальный и вертикальный центр

0 голосов
/ 20 апреля 2020

У меня есть div и внутри этого div, у меня есть текст и одна карточка, и я должен сделать их вертикально и горизонтально по центру, как показано на рисунке ниже. Заранее спасибо. 

.percentile-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  width: 30%;
  height: 30%;
  float: left;
}

.percentile-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<div class="border">
  <h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
  <div class="percentile-card text-center">
    <h3>You did better Than</h3>
    <h3><b>60%</b></h3>
  </div>
</div>

image

Ответы [ 4 ]

1 голос
/ 20 апреля 2020

Я смотрю все ответы и не думаю, что эти ответы действительны. Итак, я отправил ответ. 

.root_class {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 0 auto;
}

@media (max-width: 576px) {
  .root_class {
    flex-direction: column;
  }
}

.text {
  font-size: 2rem;
  color: #bbb;
  margin: 0;
  margin-right: 1rem;
  text-align: center;
}

.percentile-card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  margin: 1rem;
}

.percentile-card p {
  margin: 0;
}

.percentile-card p:first-child {
  color: #bbb;
}

.percentile-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<div class="border root_class">
  <p class="text">Where Do i Stand Overall ?</p>
  <div class="percentile-card text-center">
    <p>You did better Than</p>
    <p><b>60%</b></p>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
1 голос
/ 20 апреля 2020

Чтобы по центру в середине страницы вы могли удалить свойство float из percentile-card и заменить его на по центру поле.

Для вертикального выравнивания вы можете использовать высоту просмотра.

Эта ссылка w3 может быть полезна для выделения полей. Наряду с этими демонстрациями.

Что касается высоты вида, если вы не хотите, чтобы она была установлена ​​на основе ограничения из предыдущего элемента, вы можете рассмотреть позиции .

Фрагмент: 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
    .percentile-card{
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      width: 800px;
      height: 30%;
      margin: 0 auto;
      padding:10px;
    }

    .percentile-card:hover {
      box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    }

    .border{
        margin-top: 40vh;
        text-align: center;
    }
</style>
</head>
<body>

<div class="border">
    <div class="percentile-card" style="display: flex;">
        <div style="flex-basis: 70%">
            <h2 style="font-size: 3em;">Where do I stand overall ?</h2>
        </div>
        <div class="percentile-card" style="flex-basis: 30%">
            <h3 >You did better Than</h3>
            <h3><b>60%</b></h3>
        </div>
        
    </div>
</div>

</body>
</html>

Для границы с картой внутри варианта:

Фрагмент: 

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <style>
        .percentile-card{
          box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
          transition: 0.3s;
          width: 800px;
          height: 30%;
          
        }

        .percentile-card:hover {
          box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        }

        .border{
            margin-top: 40vh;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="border">
        <div class="" style="display: flex; border:1px solid black;margin: 0 auto; padding:10px;width: 800px">
            <div style="flex-basis: 70%">
                <h2 style="font-size: 3em;">Where do I stand overall ?</h2>
            </div>
            <div class="percentile-card" style="flex-basis: 30%">
                <h3 >You did better Than</h3>
                <h3><b>60%</b></h3>
            </div>
            
        </div>
    </div>

</body>
</html>
0 голосов
/ 20 апреля 2020

я исправлю это .... 

.percentile-card{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 30%;
  height: 30%;
  float: left;
}

.percentile-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.Center{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
  <div class="border">
        <h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
        <div class="percentile-card text-center Center">
          <h3>You did better Than</h3>
          <h3><b>60%</b></h3>
        </div>
      </div>
0 голосов
/ 20 апреля 2020

?? Сосредоточение вещей

Лучшее место для понимания и применения центрирования css для вашего случая использования.

Согласно приведенному выше коду, вы можете добавить css в вашем border классе: 

.border {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}

Ниже приведен рабочий фрагмент: 

.border {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center
}
.percentile-card{
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  width: 30%;
  height: 30%;
  float: left;
}

.percentile-card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
      <div class="border">
        <h2 style="font-size: 3em;">Where Do i Stand Overall ?</h2>
        <div class="percentile-card text-center">
          <h3>You did better Than</h3>
          <h3><b>60%</b></h3>
        </div>
      </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...