Блог

Вот мой HTML:

 <header className="parent__section" id="header-section-hero">
    <a href="https://somewebsite.com"><div className="github-icon"><FaGithub className="github-text"/></div></a>
    <a href="https://someotherwebsite.com"><div className="linkedin-icon"><FaLinkedin className="linkedin-text" /></div></a>
</header>
 

Вот мой CSS (SCSS):

 .parent__section {
    width: 100%;
    height: 43rem;
    background-image: url("../Assets/someimage.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}




.github-icon{
    background-color: lightgray;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;

    z-index: 100;
    opacity: 0.8;



    .github-text{
      font-size: 35px;
      position: relative;
      top: 1.35rem;
      left: 1.35rem;
    }

}

.github-text:hover{
    transform: rotate(-30deg);
    cursor: pointer;
}

.linkedin-icon{

    background-color: lightgray;
    border-radius: 50%;
    width: 5rem;
    height: 5rem;

    z-index: 100;
    opacity: 0.8;

    .linkedin-text{
      font-size: 35px;
      position: relative;
      left: 1.35rem;
      top: 1.35rem;
    }


}
 

Я использовал следующее для размещения элемента на веб-странице, однако он работал/выглядел так, как хотелось бы, только для определенных разрешений экрана

 position: relative;
top: someNumber;
left: someNumber;
 

но когда меняется разрешение экрана, он портится и нарушает поток пользовательского интерфейса.

Я хочу центрировать и, как показано на рисунке ниже: Как лучше всего расположить элемент, который работает для всех разрешений экрана?

Кроме того, почему использование свойства position нарушает поток пользовательского интерфейса для разных разрешений экрана, каков альтернативный способ размещения элемента справа или слева ?

Спасибо.

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

если вы используете некоторые значения px вверху и слева вместо некоторого числа, как вы упомянули в своем вопросе, эти значения px могут работать для определенного разрешения, например, 500 пикселей x 500 пикселей, центр экрана вверху:250 пикселей и слева:250 пикселей, но центр изменяется на другое значение для экрана 1000 пикселей X 1000 пикселей, поэтому ваш контент не будет центрирован для другого разрешения.

Лучший способ: используйте flexbox

Чтобы изучить Flexbox: https://flexboxfroggy.com/

 .parent{
height:200px;
display:flex;
justify-content:center;
align-items:center;
background:yellow;
} 

 <div class='parent'>
  <div class='child'>
  Center me 
  </div>
</div> 

Лучший способ, который мы можем найти, — это Flexbox и CSS-сетка, но я предлагаю Flexbox. Вы можете использовать кантер «выравнивание содержимого» и «выравнивание элементов», а также строку «направление сгиба». приятного времяпровождения 🙂

Вы можете сделать это с помощью «flexbox». Родительский элемент (тег заголовка) должен иметь:

     display:flex;
    align-items:center;
    justify-content:center;