Вертикальное центрирование моего текста на панели навигации с двумя div рядом с CSS и reactJS

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

Стоит заметить, что два элемента div закрывают панель навигации на 50% каждый, поэтому они имеют одинаковые размеры.

Я попытался:

  1. Работа с margin: 0 auto не работает, потому что мне нужно поле -10 слева, чтобы компенсировать CSS-элементы моего браузера (я пытался работать с нормализующим скриптом, но поскольку это не сработало, как ожидалось, я его пропустил),
  2. установка box-sizing на border box,
  3. перевод y в -50%,
  4. изменение позиций на relative для дочернего элемента и absolute для родителя,
  5. Установка top на 50% (не работает, поскольку смещает дочерние контейнеры панели навигации),
  6. ничего с 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 я не нашел источник этой проблемы.

Я преобразовал ваш «App.js» в простой образец HTML, так как именно его в конечном итоге увидит браузер. Не могли бы вы исправить этот HTML, я предполагаю, что элементы будут <a href = "/settings"><i class = "material-icons>settings</i></a>, но я не уверен в этом.

David Thomas 10.11.2022 18:16

Я использую прямую ссылку, которую я нашел в своей учетной записи Google Fonts, конечно, не самый эффективный вариант, но он выполнил свою работу, поэтому я оставил его для начала своего проекта, я добавлю html-файл, чтобы было более четкое представление что происходит

Gollasso 10.11.2022 19:23
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
1
2
68
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

почему нельзя использовать 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 или сброс Мейера, но у меня были проблемы с этим, поэтому это было мое временное решение.

Gollasso 10.11.2022 19:48

Простое решение (не обязательно использовать Normalize.css в этом отношении) — просто добавить * { padding:0;margin:0 } в самый верх вашего файла CSS. (Тогда, если вы хотите, чтобы какой-либо элемент имел определенное поле или отступ, вам придется повторно добавить их вручную. Например, p { margin-bottom:10px; } или что-то еще...)

Damian Fraustro 10.11.2022 19:55

хорошо, по какой-то причине трюк с * { padding:0;margin:0 } не сработал, я попробовал и удалил другие компоненты, влияющие на поля, но по какой-то причине панель навигации смещается, когда я не устанавливаю -10 в обертка или левая верхняя панель навигации

Gollasso 10.11.2022 20:57

В конце концов это сработало, я просто добавил поле 0 и отступ 0 в неправильный файл css. Я добавил его в app.css, а не в «настоящее» тело html.

Gollasso 14.11.2022 18:28

Прохладный! Так что это устраняет необходимость в этих «странных» отрицательных полях. Удалось ли вам расположить верхние панели рядом, как вы и предполагали? Вы пробовали использовать «display: flex» в контейнере?

Damian Fraustro 15.11.2022 22:46

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

Gollasso 16.11.2022 16:38

Другие вопросы по теме