Как выровнять подзаголовок с заголовком? - PullRequest
Новая
       6

Как выровнять подзаголовок с заголовком?

0 голосов
/ 14 июля 2020

Я пытаюсь добавить подзаголовок (выделен на скриншоте).

Мой код полностью удаляет элемент со страницы. Обратите внимание, что пока элемент все еще находится в DOM, он удаляется визуально и любым другим мыслимым способом (вы не можете перейти к нему или его дочерним элементам, он игнорируется программами чтения с экрана и т. Д. c). 

body {
  background-image: url(./assets/shutterstock_1680256285.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgba(0, 88, 147, 1);
}

.wrapper {
  display: flex;
}

.header {
  height: 66px;
  background: rgba(0, 88, 147, 1);
  background: -webkit-gradient( left top, right top, color-stop(0%, rgba(0, 88, 147, 1)), color-stop(59%, rgba(0, 88, 147, 1)), color-stop(86%, rgba(119, 196, 42, 1)), color-stop(100%, rgba(119, 196, 42, 1)));
  background: -webkit-gradient( linear, left top, right top, from(rgba(0, 88, 147, 1)), color-stop(59%, rgba(0, 88, 147, 1)), color-stop(86%, rgba(119, 196, 42, 1)), to(rgba(119, 196, 42, 1)));
  background: linear-gradient( to right, rgba(0, 88, 147, 1) 0%, rgba(0, 88, 147, 1) 59%, rgba(119, 196, 42, 1) 86%, rgba(119, 196, 42, 1) 100%);
  align-items: baseline;
}

.logo {
  min-height: 66px;
  width: 288px;
  margin-left: 2px;
}

.logo-wrapper {
  padding-left: 16%;
}

.header {
  border-bottom: white solid 1.3px;
}

.banner {
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 16px;
  padding-bottom: 60px;
  margin-top: calc(350px / 2);
  text-align: center;
  color: rgb(19, 101, 155);
  background-color: rgb(255, 255, 255, 0.8);
  height: auto;
  overflow: hidden;
  width: fit-content;
  background-size: cover;
  font-size: 22px;
}

.banner h1 {
  font-size: 48px;
  padding-bottom: 12px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>RGP Maintenance</title>
  <link rel="stylesheet" type="text/css" href="https://resources.renlearnrp.com/scripts/master-css/master.css" />
  <link rel="stylesheet" type="text/css" href="/style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://resources.renlearnrp.com/scripts/webfonts/webfont.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
  <div class="header">
    <div class="logo-wrapper">
      <object class="logo" data="https://resources-zone99.renaissance-go.com/scripts/logos/svg/renaissance-learning-horizontal.svg#white"></object>
    </div>
  </div>
  <div class="banner">
    <center>
      <h1>Planned Maintenance</h1>
      <p>You've come to the right place, but your site is unavailable for a few hours <br> while we perform scheduled updates that will help you accelerate learning.
      </p>

  </div>
  </center>
  </div>
</body>

</html>

Ответы [ 2 ]

3 голосов
/ 14 июля 2020

Вот вам go. Вы можете сделать это, используя flex и свойство align item: center css на вашем .logo-wrapper

. Также я добавил span с классом .sub_header для текста вашего подзаголовка и дал margin-left от 2em, чтобы переместить подзаголовок.

Выполнить фрагмент ниже. 

body {
  background-image: url(./assets/shutterstock_1680256285.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: rgba(0, 88, 147, 1);
}

.header_top {}

.wrapper {
  display: flex;
}

.header {
  height: 66px;
  background: rgba(0, 88, 147, 1);
  background: -webkit-gradient( left top, right top, color-stop(0%, rgba(0, 88, 147, 1)), color-stop(59%, rgba(0, 88, 147, 1)), color-stop(86%, rgba(119, 196, 42, 1)), color-stop(100%, rgba(119, 196, 42, 1)));
  background: -webkit-gradient( linear, left top, right top, from(rgba(0, 88, 147, 1)), color-stop(59%, rgba(0, 88, 147, 1)), color-stop(86%, rgba(119, 196, 42, 1)), to(rgba(119, 196, 42, 1)));
  background: linear-gradient( to right, rgba(0, 88, 147, 1) 0%, rgba(0, 88, 147, 1) 59%, rgba(119, 196, 42, 1) 86%, rgba(119, 196, 42, 1) 100%);
  align-items: baseline;
}

.logo {
  min-height: 66px;
  width: 288px;
  margin-left: 2px;
}

.sub_header {
  margin-left: 2em;
}

.logo-wrapper {
  padding-left: 16%;
  display: flex;
  align-items: center;
  color: white;
}

.header {
  border-bottom: white solid 1.3px;
}

.banner {
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
  padding-top: 16px;
  padding-bottom: 60px;
  margin-top: calc(350px / 2);
  text-align: center;
  color: rgb(19, 101, 155);
  background-color: rgb(255, 255, 255, 0.8);
  height: auto;
  overflow: hidden;
  width: fit-content;
  background-size: cover;
  font-size: 22px;
}

.banner h1 {
  font-size: 48px;
  padding-bottom: 12px;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>RGP Maintenance</title>
  <link rel="stylesheet" type="text/css" href="https://resources.renlearnrp.com/scripts/master-css/master.css" />
  <link rel="stylesheet" type="text/css" href="/style.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://resources.renlearnrp.com/scripts/webfonts/webfont.js" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link rel="shortcut icon" href="favicon.ico" />
</head>

<body>
  <div class="header">
    <div class="logo-wrapper">
      <object class="logo" data="https://resources-zone99.renaissance-go.com/scripts/logos/svg/renaissance-learning-horizontal.svg#white"></object>
      <span class="sub_header">Accelerating Learning for all</span>
    </div>
  </div>
  <div class="banner">
    <center>
      <h1>Planned Maintenance</h1>
      <p>You've come to the right place, but your site is unavailable for a few hours <br> while we perform scheduled updates that will help you accelerate learning.
      </p>
      <p>Contact help@renaissance.com with questions.</p>
  </div>
  </center>
  </div>
</body>

</html>
0 голосов
/ 14 июля 2020

Вы можете добавить в lo go -wrapper div текст вашего подзаголовка и использовать flexbox и align-items: flex-end;

.logo-wrapper {
    padding-left: 16%;
    display: flex;
    align-items: flex-end;
}

Подробнее о flexbox: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...