2016-10-06 3 views
0

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

+0

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

+0

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

+0

Вы говорите о том, что вы сделали, но не показываете, что вы сделали. Это не сработает. – Rob

ответ

4

Вы можете просто увеличить 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>

+0

это работает спасибо –

+0

Я рад, что смог помочь @Jake_the_camper. –

-1

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

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

Оба способа работы в равной степени, но это держит ваш очиститель HTML

+0

спасибо за нижний план. –

0

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

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

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

.paragraph { 
    font-size: 15px; 
} 

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

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

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

justify-content: center; 
0

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

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

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

p{ 
    font-size:32px; 
} 

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

Задача 2: - У меня также есть проблемы, чтобы мой тэг абзаца с центром в центре DIV

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

Вы должны написать эту code.In этот код вы даете выравнивания текста центр для 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; 
    } 
Смежные вопросы