Центрирование компонента React не работает

LoginComponent.js

  render() {
    return (
       <div className = "col-md-6">
        <form>
          <div class = "form-group">
            <label for = "exampleInputEmail1">Email address</label>
            <input value = {this.state.email} onChange = {this.handleChangeEvent} type = "email" name = "email" class = "form-control" id = "exampleInputEmail1" aria-describedby = "emailHelp" placeholder = "Enter email" />
            <small id = "emailHelp" class = "form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
        </form>

      </div>
    );
  }

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

Login.js

const loginStyles = {
  display: 'flex', justifyContent: 'center'
}

class Login extends Component {
  constructor(props) {
    super(props);

  }

  render() {
    return (
      <div>
        <LoginComponent style = {loginStyles}/>
      </div>
    );
  }
}

Итак, я просто использовал flex и justifiyContent, чтобы поле переместилось в центр страницы, но оно остается в верхнем левом углу страницы. Как я могу справиться с этой проблемой?

<div style = {loginStyles}>

— 01.12.2018 17:22

css reactjs

01.12.2018 17:10

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

108

Ответы 2

Помимо другого ответа, вам также необходимо установить ширину родительского компонента div для горизонтального центрирования. Итак, в вашем случае вы можете установить родительскую ширину div на `width:" 100% "'

const loginStyles = {
  display: 'flex', 
  justifyContent: 'center', 
  width: "100%"
}

В качестве блочного элемента div по умолчанию имеет ширину 100%, поэтому добавлять его не нужно.

— 01.12.2018 17:49

это только центрирует его по горизонтали, как я могу сделать его также по центру по вертикали?

— 01.12.2018 18:00

01.12.2018 17:23

Это потому, что передача style = {loginStyles} на ваш LoginComponent ничего не дает, если вы не используете эту опору ...

style должен быть установлен в теге HTML. Вы можете попробовать обернуть весь JSX другим div как таковой:

render() {
    return (
       <div style = {this.props.style}>
        <div className = "col-md-6">
          <form>
            <div className = "form-group">
              <label htmlFor = "exampleInputEmail1">Email address</label>
              <input value = {this.state.email} onChange = {this.handleChangeEvent} type = "email" name = "email" className = "form-control" id = "exampleInputEmail1" aria-describedby = "emailHelp" placeholder = "Enter email" />
              <small id = "emailHelp" className = "form-text text-muted">We&apos;ll never share your email with anyone else.</small>
            </div>
          </form>

        </div>
      </div>
    );
  }

Таким образом, ваш LoginComponent будет фактически использовать опору style, переданную его родителем.

01.12.2018 17:24