alex_web64

Отцентрировать один блок из трех относительно родителя

Recommended Posts

Здравствуйте.

Есть вот такой пример https://jsfiddle.net/5dnz61qu/ Мне нужно, чтобы центр зеленого блока всегда находился в центре родительского.

У меня два варианта, но они оба мне не нравятся:

1) Абсолютное позиционирование.

2) Задать синему блоку такую же ширину, как и в красного. В блоках динамический контент, поэтому хотелось бы, чтобы они могли занимать все свободное пространство, а с этим вариантом такого не получится.

Есть еще идеи?

Share this post


Link to post
Share on other sites
2 часа назад, alex_web64 сказал:

У меня два варианта, но они оба мне не нравятся:

А чем не нравится позиционирование?

<div class="parent">
  <div class="wrap">
    <div class="child child-1">Lorem ipsum dolor</div>
  </div>
  <div class="wrap">
    <div class="child child-2">Lorem ipsum dolor sit amet, consectetur</div>
  </div>
  <div class="wrap">
    <div class="child child-3">Lorem</div>
  </div>
</div>
<div class="center">
  Центр родительского блока
</div>
/* Внешний вид */
body {
  background: #ccc;
}
.parent {
  border: 2px solid #000;
  position: relative;
}
.center {
  text-align: center;
  position: relative;
  padding-top: 20px;
}
.center::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 20px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: #f00;
}
.child {
  height: 100px;
  flex-shrink: 0;
  white-space: nowrap;
}
.child-1 {
  background: #f00;
}
.child-2 {
  background: #0f0;
  position: relative;
}
.child-2::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: #f00;
}
.child-3 {
  background: #00f;
}

/* Позиционирование */
.parent {
  display: flex;
  justify-content: space-between;
}
.wrap {
  display: flex;
  width: 33.33%;
}
.wrap:nth-child(2) {
  justify-content: center;
}
.wrap:last-child {
  justify-content: flex-end;
}

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,701
    Total Members
    3,128
    Most Online
    VovkaKrut
    Newest Member
    VovkaKrut
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.