Блог

Я использовал react.js для создания шаблона веб-сайта.

Когда я создавал первый компонент, я столкнулся с проблемой.

проблема:

картинка находится не в середине страницы (я имею в виду по вертикали и по горизонтали).

Я уже использовал CSS flex, чтобы сделать его посередине.

Почему моя фотография расположена не в середине страницы?

Просто поместите это изображение в этот круг.

Как это сделать?

Вот мой Center.js:

  import React from 'react';
 import image from './images/5.png'
 import './Center.css';

 const Center = () =>{
     return(
          <div id="center2">
             <img  id="center" alt="center" src={image}/>
          </div>
     );
   }

   export default Center
 

мой app.js:

    import React, { Component } from 'react';
   import Center from './Components/Center';

   class App extends Component {
  render() {
    return (
     <div>
         <Center/>
      </div>
    );
  }
 }

export default App;
 

мой center.css:

 #center2{
text-align:center;
}
#center{
  width:300px;
  height:300px;
}
 

моя веб-страница на localhost 3000

Если они статичны, вам нужно импортировать их:

 import image from './images/5.png'

return (
    <div id='center'>
        <img src={image} />
    </div>
)
 

в противном случае вам нужно переместить images папку в public каталог и получить к ней доступ с помощью

 <div id='center'>
    <img src='./images/5.png' />
</div>
 

И это CSS, чтобы сделать это изображение в центре:

 #center2 {
  display: flex;
  justify-content: center;
  align-items: center;
}