React js Semanti c Пункты меню по центру - PullRequest
Новая
       5

React js Semanti c Пункты меню по центру

1 голос
/ 06 января 2020

Здравствуйте. У меня проблемы с оставлением моего контента в центре этого div

код: https://codesandbox.io/s/hungry-https-c5432

Я попытался установить встроенный дисплей на h5 и это все еще не работало 

<div className="App">
  <Menu
    className="borderless"
    style={{ width: "240px", height: "100vh" }}
    vertical
  >
    <Menu.Item className="logo">
      <Image src={logo} style={{ width: "50px", height: "50px" }} />
      <h5>E M A S A</h5>
      <Divider style={{ color: "#000 !important" }} />
    </Menu.Item>
  </Menu>
</div>

css: 

.ui.menu {
  border-radius: 0px !important;
  border: 0px !important;
  box-shadow: none !important;
  background-color: #252631 !important;
}
.ui.menu .item {
  padding: 8px !important;
}
r {
  margin-bottom: 0 !important;
}r {
  margin-bottom: 0 !important;
}

Ответы [ 3 ]

2 голосов
/ 06 января 2020

Чтобы выровнять img по центру, вы можете добавить margin: 0 auto; display: block;

, а для выравнивания текста h5 вы можете добавить text-align: center;

Проверьте эту ссылку: https://codesandbox.io/embed/sweet-glitter-9toif?fontsize=14&hidenavigation=1&theme=dark

1 голос
/ 06 января 2020

Я понял, что они вам нужны в одной строке, поэтому добавьте это к css .ui.vertical.menu .item{display:flex; justify-content:center;}

0 голосов
/ 06 января 2020

Вам нужно обновить CSS, вот демо-ссылка

Код JSX 

 <Menu
    className="borderless"
    style={{ width: "240px", height: "100vh" }}
    vertical>
    <Menu.Item className="logo">
      <h5>
        <Image
          src={logo}
          style={{ width: "50px", height: "50px", marginRight: "10px" }}
        />
        <span>E M A S A</span>
      </h5>
      <Divider style={{ color: "#000 !important" }} />
    </Menu.Item>
  </Menu>

CSS

.ui.menu {
  border-radius: 0px !important;
  border: 0px !important;
  box-shadow: none !important;
  background-color: #252631 !important;
}

.ui.menu .item {
  padding: 8px !important;
  text-align: center;
}

.ui.menu .item h5 {
  text-align: center;
}

.ui.divider {
  margin-bottom: 0 !important;
}

img.ui.image {
  display: inline-block;
}
...