Как мне изменить размер шрифта тега абзаца внутри тега div?

#html #css

#HTML #css

Вопрос:

Я только что начал новый проект и столкнулся с проблемой. Моя проблема в том, что я не могу увеличить размер шрифта тега абзаца, который находится внутри тега div. У меня также есть проблема с центрированием тега абзаца в центре div.

 div {
  height: 50px;
  width: 50px;
  text-align: center;
}
.gases {
  background-color: limegreen;
}

 <!DOCTYPE html>
<html>

<head>
  <title>The Periodic Table</title>
  <style>
  </style>
</head>

<body>
  <div class="periodOne groupOne gases" id="hydrogen">
    <p>H</p>
  </div>
</body>

</html>

1. Как вы пытались увеличить размер шрифта? Что касается центрирования, рассмотрите возможность использования гибкой компоновки (поиск flexbox ), если вы ориентируетесь на современные браузеры; но в вашем случае, похоже, вам даже не нужно центрировать, вы можете использовать размеры в em rem терминах или.

2. @owen Я пытался использовать fomt-size как в моем теге стиля, так и в качестве встроенного тега стиля

3. Вы говорите о том, что вы сделали, но не показываете, что вы сделали. Здесь это не сработает.

Ответ №1:

Вы можете просто увеличить font-size размер абзаца и добавить line-height значение, равное высоте div , чтобы центрировать его по вертикали.

Код:

 /* ----- CSS ----- */
div {
  height: 50px;
  width: 50px;
  text-align: center;
}
.gases {
  background-color: limegreen;
}
#paragraph {
  font-size: 30px;
  line-height: 50px;
}

 <!----- HTML ----->
<div class="periodOne groupOne gases" id="hydrogen">
  <p id="paragraph">H</p>
</div>

Ответ №2:

Вы можете добавить класс в тег p, а затем указать размер шрифта,

 .paragraph {
   font-size: 15px;
}

Вы можете центрировать текст внутри div по вертикали с помощью,

 .gases {
    display: flex;
    align-items: center;
}

Вы также можете центрировать содержимое по горизонтали, добавляя,

 justify-content: center;

Ответ №3:

Вы можете стилизовать теги напрямую, однако имейте в виду, что это глобальное изменение.

    div p {
        text-align: center;
        font-size: 1.3em;
        width: 100%;
    }

Ответ №4:

Проблема 1: — Я не могу увеличить размер шрифта тега абзаца, который находится внутри тега div

Решение 1 -> Создать идентификатор для тега абзаца и применить к нему размер шрифта.

Решение 2 -> вы можете напрямую изменить его размер, просто написав

 p{
   font-size:32px;
 }

но лучшим подходом будет использование идентификатора, чтобы этот абзац можно было идентифицировать однозначно.

Проблема 2: — У меня также есть проблема с центрированием тега абзаца в центре div

 div {
   height: 50px;
    width: 50px;
    text-align: center;
 }

Вы должны написать этот код.В этом коде вы присваиваете div выравнивание текста по центру.
Таким образом, он отправит в center любую вещь, которая будет находиться внутри этого div (не только этот div каждый div на этой странице)

Решение 1 -> вы можете удалить это свойство css

Решение 2 -> вы также можете написать это, чтобы вернуть его туда, где он был

   p{
       text-align:left;
    }

Все решение

     <!--HTML-->
    <div class="periodOne groupOne gases" id="hydrogen">
       <p id="increaseFont">That's how you can incrrease font man</p>
    </div>



//css 
div {
    height: 50px;
    width: 50px;
    text-align: center;
 }
.gases {
    background-color: limegreen;
 }
 #increaseFont{
     font-size:23px;
  }
  p{
      text-align:left;
   }

Ответ №5:

другой способ …. вместо добавления другого тега id вы можете использовать это..

 hydrogen>p{
  font-size: 30px;
  line-height: 50px;
}

Оба способа работают одинаково, но это делает ваш HTML более чистым