Я чрезвычайно новичок в HTML/CSS, так что это может быть глупый вопрос, но мне сложно сосредоточить текст в моей навигационной панели. Я не знаю, как правильно центрировать его горизонтально или вертикально, поэтому, чтобы получить его по горизонтали, я просто положил 25% левого края на самый левый элемент навигатора. Я предполагаю, что это не правильный способ сделать что-то. Что касается того, как вертикально центрировать текст, я не знаю, как это сделать.Центрирование текста (по горизонтали и по вертикали) в nav
Как добавленный вопрос, может ли кто-нибудь сказать мне, как сделать масштаб текста при изменении размера окна браузера? Когда я уменьшаю ширину окна, все мои тексты скручиваются на экране.
P.S. Я делаю это как задание для класса, в котором я участвую, но мой инструктор действительно не помог.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mini Vocaloid Wiki</title>
<meta charset="utf-8" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<div id="page">
<nav id="topNav">
<a id="left" href="vocaloids.html">Vocaloids</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
</div>
</body>
</html>
CSS:
body, html {
height: 100%;
width: 100%;
margin: 0;
}
#page {
height: 100%;
width: 100%;
background-color: yellow;
padding: 1%;
background-image: url('images/background_image.jpg');
background-repeat: no-repeat;
}
#topNav {
border: 2px solid black;
border-radius: 8px;
margin-left: auto;
margin-right: auto;
width: 66%;
height: 5%;
text-align: center;
background-size: cover;
background-position: bottom left;
background-repeat: no-repeat;
background-image: url('images/blurred_background.jpg');
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
font-size: 2em;
}
nav a {
display: inline-block;
text-decoration: none;
color: white;
float: left;
width: 15%;
height: 100%;
margin-right: 1%;
}
#left {
margin-left: 25%;
}
#topNav a:hover {
border-radius: 8px;
background-color: white;
color: black;
}
Edit: Вот ссылка на изображение того, что она в данный момент выглядит. Я забыл добавить это в http://puu.sh/ld0LM/2de7d95deb.jpg
Edit 2:. Мне сказали, что мой инструктор использовать% вместо пикселей всякий раз, когда это возможно, так что весы, когда окно браузера изменяется, но это разумно использовать% почти все? Я предполагаю, что если бы я изменил свою высоту на что-то примерно на 50 или 100 пикселей, а затем сделал мою линию-высоту такой же, она решила бы мою проблему, но я не могу сделать это с%.
Просто попросить других сделать домашнее задание для вас, вряд ли служит цели домашней работы. В зависимости от расширения задания это можно считать уже обманом, а это значит, что вы потеряете свой класс, когда узнаете о себе. И поверьте мне, мы, TA, хорошо осведомлены о stackoverflow ;-) –
@Christain Fritz, Нет, я не пытаюсь обманывать или делать что-либо подобное. Я искал в Интернете, искал и искал несколько часов и не мог найти ничего, что могло бы мне помочь. Все, что я хочу, - это центрировать текст. Задача состоит не в том, чтобы просто центрировать текст, это создать полный веб-сайт, но я просто хотел, чтобы моя панель навигации выглядела красиво. – Christian
Это, вероятно, не то, что вы хотите услышать, но я думаю, что самый простой способ для вас (и для любого) сделать правильную панель навигации - использовать свойства table/table-cell. Конечно, это всего лишь совет, вы можете достичь этого другим способом, но это будет в основном соответствовать всем вашим требованиям с менее возможным кодом. –