Я борюсь с вертикальным выравниванием текста, показанного на панели навигации ниже. У меня есть один div, который распространяется на всю навигационную панель как контейнер, и два дочерних div, два из которых охватывают правую и левую части навигационной панели бок о бок. Центрировать по горизонтали не проблема.
Стоит заметить, что два элемента div закрывают панель навигации на 50% каждый, поэтому они имеют одинаковые размеры.
Я попытался:
margin: 0 auto
не работает, потому что мне нужно поле -10
слева, чтобы компенсировать CSS-элементы моего браузера (я пытался работать с нормализующим скриптом, но поскольку это не сработало, как ожидалось, я его пропустил),box-sizing
на border box
,-50%
,relative
для дочернего элемента и absolute
для родителя,top
на 50%
(не работает, поскольку смещает дочерние контейнеры панели навигации),display: flex
не работает, потому что мне нужно, чтобы два дочерних элемента были встроенными блоками, чтобы соответствовать друг другу.Вот мой код:
.wrapper {
width: 100vw;
height: 2.5cm;
margin-top: -10px;
align-items: baseline;
position: relative;
}
.topnav-left {
margin-left: -10px;
background-color: #18191C;
height: 2cm;
width: 50vw;
display: inline-block;
vertical-align: top;
position: relative;
}
.topnav-right {
background-color: #18191C;
height: 2cm;
width: 50vw;
display: inline-block;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<div className = "wrapper">
<div className = "topnav-left">
<Link to = "/About"><u>Über</u></Link>
</div>
<div className = "topnav-right">
<Link to = "/settings"><i class = "material-icons">settings</i></Link> <!-- uses gooogle font incons -->
<Link to = "/profile"><i class = "material-icons">person</i></Link> <!-- uses gooogle font incons -->
</div>
</div>
Есть ли что-то, что я упускаю, или, возможно, совершенно другая идея?
Любая помощь приветствуется
PS: есть и другие вопросы, которые нуждаются в помощи по вертикальному выравниванию текста, но большинство из них не так специфичны для ситуации; Я просмотрел эти вопросы и выполнил небольшие шаги, приведенные в других примерах, но ни один из них не сработал для меня.
Редактирует: Я добавил свой html-файл для разъяснения моей проблемы, чтобы код можно было лучше понять.
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
</style>
<meta charset = "utf-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1" />
<meta name = "theme-color" content = "#000000" />
<meta
name = "description"
content = "Web site created using create-react-app"
/>
<link rel = "icon" href = "Images/logo.png" />
<link rel = "apple-touch-icon" href = "%PUBLIC_URL%/logo192.png" />
<link rel = "manifest" href = "%PUBLIC_URL%/manifest.json" />
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons"> <!-- Use of google font icons -->
<title>GFOS Award</title>
</head>
<body style = "overflow: hidden;">
<div id = "root" style = "height: 100vh;" ></div>
</body>
</html>
Вот что произойдет, если я использую конфигурацию, указанную в качестве ответа, так как я довольно новичок, чтобы реагировать, и css я не нашел источник этой проблемы.
Я использую прямую ссылку, которую я нашел в своей учетной записи Google Fonts, конечно, не самый эффективный вариант, но он выполнил свою работу, поэтому я оставил его для начала своего проекта, я добавлю html-файл, чтобы было более четкое представление что происходит
почему нельзя использовать display flex? если вы просто хотите, чтобы левый div имел ширину 50% от родительского элемента, напишите это:
.topnav-left{
float: left;
width: 50%;
display:flex;
align-items:center;
}
.topnav-right{
float: right;
width: 50%;
display:flex;
align-items:center;
}
поскольку вы используете float, вы можете использовать display: flex, поскольку дочерние элементы div больше не должны быть встроенными блоками.
Я думаю, что ваш лучший вариант - работать с display: flex, и я могу неправильно понять, что вы сказали, что вам нужно, но я думаю, что вам не хватает также использовать flex для контейнера.
Итак, вы можете сделать это:
.wrapper {
width:100vw;
height:2.5cm;
display:flex;
}
.topnav-left {
background-color:#18191C;
width:50%;
display:flex;
align-items:center
}
.topnav-right {
background-color:#18191C;
width:50%;
display:flex;
align-items:center;
justify-content:end;
}
Вопрос: почему отрицательные значения "margin-top" и "margin-left" в обертке и topnav-left соответственно? Если они связаны с размещением оболочки по отношению к другим элементам на странице, приведенный мной код можно скорректировать с учетом этого. Но (особенно для topnav-left) это переместит содержимое за пределы естественной границы оболочки, что противоречит цели использования «100vw».
значения - для поля, так как у меня были проблемы с использованием нормализации для браузера, если я оставлю это, на панели навигации будет поле слева и в верхней части веб-сайта, это явно можно сделать более точным способом, но на данный момент, поскольку эта проблема сводила меня с ума, я хотел сделать это позже. Я знаю, что для этого есть сбросы, такие как Normalize.css или сброс Мейера, но у меня были проблемы с этим, поэтому это было мое временное решение.
Простое решение (не обязательно использовать Normalize.css в этом отношении) — просто добавить * { padding:0;margin:0 }
в самый верх вашего файла CSS. (Тогда, если вы хотите, чтобы какой-либо элемент имел определенное поле или отступ, вам придется повторно добавить их вручную. Например, p { margin-bottom:10px; }
или что-то еще...)
хорошо, по какой-то причине трюк с * { padding:0;margin:0 } не сработал, я попробовал и удалил другие компоненты, влияющие на поля, но по какой-то причине панель навигации смещается, когда я не устанавливаю -10 в обертка или левая верхняя панель навигации
В конце концов это сработало, я просто добавил поле 0 и отступ 0 в неправильный файл css. Я добавил его в app.css, а не в «настоящее» тело html.
Прохладный! Так что это устраняет необходимость в этих «странных» отрицательных полях. Удалось ли вам расположить верхние панели рядом, как вы и предполагали? Вы пробовали использовать «display: flex» в контейнере?
В конце концов я сделал это, я использовал поплавки, странно, когда я впервые попробовал это, это не сработало, возможно, я что-то упустил. однако позже я сделал это снова, и с поплавками и display: flex я смог достичь своей цели.
Я преобразовал ваш «App.js» в простой образец HTML, так как именно его в конечном итоге увидит браузер. Не могли бы вы исправить этот HTML, я предполагаю, что элементы будут
<a href = "/settings"><i class = "material-icons>settings</i></a>
, но я не уверен в этом.