如何获得一个以另一个div为中心的div? [英] How to get a div centered with another div on the right of it?

问题描述

我正在尝试将居中的div与另一个div放在其右侧.因此，左侧的div是水平居中的.右侧的De div直接位于居中的div的右侧.我已经用不同的显示方式和边距等方法进行了很多尝试，但似乎无法弄清楚.

欢迎所有提示！

 div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#left {
  left: 50%;
  background: #009a9a;
}

#right {
  background: #bbad4f;
} 

 <div id="left"></div>
<div id="right"></div> 

解决方案

您可以使用 Flexbox 和 positioning 来实现:

 .flex-container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  background: #009a9a;
}

#right {
  position: absolute;
  left: 50%; /* moved right by half of the parent's width */
  transform: translateX(50%); /* and half of its own width */
  background: #bbad4f;
} 

 <div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div> 

无论 divs宽度(只要它们保持不变)，此解决方案都是 dynamic ，因此没有不必要的 margins 或 calc().

但是借助 CSS变量 ，您可以使其完全 dynamic :

 :root {
  --leftWidth: 200px;
}

.flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  width: var(--leftWidth);
  background: #009a9a;
}

#right {
  position: absolute;
  left: calc(50% + (var(--leftWidth)/2)); /* moved right by half of the parent's and sibling's width */
  background: #bbad4f;
} 

 <div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div> 

I'm trying to make a centered div with another div on the right of it. So the div on the left is horizontal centered. De div on the right is directly on the right of the centered div. I've tried it in many ways with different displays and margins etc but I can't seem to figure it out.

All tips are welcome!

div {
  width: 100px;
  height: 100px;
  display: inline-block;
}

#left {
  left: 50%;
  background: #009a9a;
}

#right {
  background: #bbad4f;
}

<div id="left"></div>
<div id="right"></div>

解决方案

You can do it with the Flexbox and positioning:

.flex-container {
  display: flex; /* displays flex-items (children) inline */
  justify-content: center; /* centers them horizontally */
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  background: #009a9a;
}

#right {
  position: absolute;
  left: 50%; /* moved right by half of the parent's width */
  transform: translateX(50%); /* and half of its own width */
  background: #bbad4f;
}

<div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div>

No matter the divs width (as long as they stay the same), this solution is dynamic, therefore no unnecessary margins or calc().

But with the help of CSS variables you can make it completely dynamic:

:root {
  --leftWidth: 200px;
}

.flex-container {
  display: flex;
  justify-content: center;
  position: relative;
}

.flex-container > div {
  width: 100px;
  height: 100px;
}

#left {
  width: var(--leftWidth);
  background: #009a9a;
}

#right {
  position: absolute;
  left: calc(50% + (var(--leftWidth)/2)); /* moved right by half of the parent's and sibling's width */
  background: #bbad4f;
}

<div class="flex-container">
  <div id="left"></div>
  <div id="right"></div>
</div>

这篇关于如何获得一个以另一个div为中心的div?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！