Как уменьшить размер div, если отрицательное заполнение невозможно? Как мне его централизовать? - PullRequest
Новая
       0

Как уменьшить размер div, если отрицательное заполнение невозможно? Как мне его централизовать?

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

Я пытаюсь создать веб-сайт, чтобы проверить свои знания. Прямо сейчас я пытаюсь сделать "lo go" в центре вверху сайта, но у меня возникают проблемы с написанием текста там, где я хочу, и огромная проблема с div, окружающим lo go текст. 

:root {
  --text-font: "Trebuchet MS";
  --text-color: #5c0a0a;
  --box-color: #de7188;
  --border-color: pink;
}

header {
  font-family: var(--text-font);
  color: var(--text-color);
  text-align: center;
  font-family: "Alex Brush", cursive;
  font-size: 3em;
  margin-top: -1em;
  text-shadow: 2px 2px 5px white;
}

body {
  background: url(Images/Background.jpg);
  background-color: tomato;
  color: var(--text-color);
  font-family: var(--text-font);
}

#logo {
  background-color: var(--box-color);
  border: 0.15em solid var(--border-color);
  border-radius: 5em;
  width: 11em;
}

#motto {
  font-size: 1em;
  margin-top: -2em;
}
<link href="https://fonts.googleapis.com/css2?family=Alex+Brush&display=swap" rel="stylesheet">

<header>
  <div id="logo">
    <h1>
      Sitename
    </h1>
    <h2 id="motto">
      Motto Goes Here<br><br>
    </h2>
  </div>
</header>

<body>
  <h2>
    Filler
  </h2>
  <p>
    Some filler text that I may replace with something later.
  </p>

Ответы [ 2 ]

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

Вы можете использовать CSS margin: 0 auto для центрирования div по горизонтали.

Like 

#logo {
    margin: 0 auto;
}

Теперь у вас есть тег h1 для вашего текста. У которого есть какое-то предопределенное правило css для каждого браузера.

Вы должны указать медиа-запросы и переопределить эти правила 

h1 { // for large screens i.e. desktop, laptop
   margin: 0.67em;
}

@media only screen and (max-width: 768px) { // for the devices of width less than 768px
   h1 {
       margin: 0.3em;
   } 
}

И то же самое для h2 тега

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

Вы можете просто использовать 

#logo{
    margin: 0 auto;
}

Что касается высоты, я бы не рекомендовал выделять место внизу, используя <br>, возможно, объявление высоты # девиза поможет вам.

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

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

...