Горизонтально центрировать изображение на гибком дисплее?

Question

Я не хочу центрировать изображение в моей гибкой навигационной панели, но не могу, я уже попробовал это: Как центрировать изображение внутри гибкого элемента (ячейки) , но не работает.

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
}

nav #this img {
  height: 5em;
  width: 5em;
}

.item {
  width: 45%;
  display: flex;
  justify-content: space-around;
  line-height: 3.2em;
  font-size: 1.75em;
}

.login {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-self: center;
}

<nav>
  <div class="item">
    <div> Content </div>
    <div> Content </div>
  </div>
  <div id="myimage">
    <img src="https://via.placeholder.com/150x50">
  </div>
  <div class="login">
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
  </div>
</nav>

Answer 1

Я просто обновляю ваш CSS несколькими обновлениями.Попробуйте это, я надеюсь, это поможет вам.Спасибо

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
}

nav #this img {
  height: 5em;
  width: 5em;
}

.item {
  width: 45%;
  display: flex;
  justify-content: space-around;
  font-size: 1.75em;
}

.login {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-self: center;
}

.flexItem {
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}

<nav>
  <div class="item flexItem">
    <div> Content </div>
    <div> Content </div>
  </div>
  <div id="myimage">
    <img src="https://via.placeholder.com/150x50">
  </div>
  <div class="login flexItem">
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
  </div>
</nav>

Answer 2

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
}

nav #this img {
  height: 5em;
  width: 5em;
}

.item {
  width: 45%;
  display: flex;
  justify-content: space-around;
  line-height: 3.2em;
  font-size: 1.75em;
}

.login {
  width: 20%;
  display: flex;
  justify-content: space-around;
  align-self: center;
}
#myimage {
    display: flex;
    justify-content: center;
    align-items: center;
}

<nav>
  <div class="item">
    <div> Content </div>
    <div> Content </div>
  </div>
  <div id="myimage">
    <img src="https://via.placeholder.com/150x50">
  </div>
  <div class="login">
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
    <div> Content </div>
  </div>
</nav>

Answer 3

Я не знаю точно, что вы делаете с этим:

nav #this img {
 height: 5em;
 width: 5em;
}

Я думаю, вы хотели что-то вроде этого:

nav #myimage img {
 height: 5em;
 width: 5em;
}

Чтобы центрировать во flexbox, используйте justify-content к основной оси и выровняйте элементы по вторичному элементу в родительском элементе flexbox. в этом случае вы можете сделать это в nav и выровнять 3 непосредственных дочерних элемента в центре.

nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-radius: 1.5em;
  align-items: center;
}

Вместо этого, если вы хотите разместить изображение в родительском элементе div, то же самое, установите display: flex и выровняйте элементы по родительскому элементу (#myimage):

#myimage{
 display:flex;
 align-items:center;
}