Блог

Главная - Вопросы по программированию - Выровнять Абсолютное положение по верхнему центру в компонентах в стиле CSS/

Выровнять Абсолютное положение по верхнему центру в компонентах в стиле CSS/

#html #css #reactjs #sass #styled-components

Вопрос:

У меня есть кнопка «Назад» и заголовок, которые я хотел поместить сверху, и они должны быть выровнены. Моя проблема в том, как я могу поместить заголовок «Привет, мир» в верхний центр, а кнопку «Назад» в левом верхнем углу?

кликните сюда

  <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg" alt="back" />
      <BackText> Back </BackText>
    </BackContainer>
    <Title>Hello World</Title>
  </HeaderTopContainer>

Ответ №1:

https://codesandbox.io/s/heade-styled-components-forked-yjirb?file=/src/Header.js

   <HeaderTopContainer>
    <BackContainer>
      <BackArrow src="arrow.svg" alt="back" />
      <BackText> Back </BackText>
    </BackContainer>
    <Title>Hello World</Title>
    <BackContainer></BackContainer>
  </HeaderTopContainer>

  const BackContainer = styled.div`
    display: flex;
    align-items: center;
    cursor: pointer;
    min-width:100px
  `;

проверьте это, я помещаю фиктивный контейнер кнопки «Назад» после заголовка и даю ту же ширину, что и контейнер левой кнопки «назад»

после этого flex выполнит свою работу,

Примечание: по умолчанию поле в теле имеет размер 8 пикселей, что делает прокрутку в нем, пожалуйста, отмените это, если в этом нет необходимости

Комментарии:

1. Что вы подразумеваете под разницей в 8 пикселей? Я не могу этого видеть?

2. в вашем теле кода codesandbox есть поле (по умолчанию) — я не знаю, есть ли оно в вашем проекте , если у вас нет никаких проблем, оставьте его

Ответ №2:

В вашем css для заголовка используйте:

 position: absolute;
top: 0;
right: 0;
left: 0;
width: 100%;
text-align: center;

и для кнопки «Назад»:

 position: absolute;
top: 0;
left: 0;

Комментарии:

1. это может перекрываться на экранах меньшего размера

Ответ №3:

Проблема в том, что вы используете display: flex для строки заголовка.

Я настроил вашу ссылку. Попробуй это

Вы должны установить position: absolute для кнопки «Назад» и переместить ее влево, а также добавить display: block в заголовок текст, и добавить text-align:center его будет достаточно.

для BackContainer 

 .back {
display: flex;
  align-items: center;
  cursor: pointer;
  position: absolute;
  left: 4px;
  top: 20px;
  }

для Title 

 .title {
 display: block;
  align-items: center;
  font-size: 18px;
}
Метки: