居中问题内联块div元素

Question

我遇到的问题是我的contact-section-left不在父div中。这不是vertical-align: top问题。你可以看到border-right白线，它显示了contact-section-left div的高度延伸多少，但是它与图像右边的大小相同（对不起这个例子）没有图像。）

我不确定我是在这里采取错误的做法还是做什么，但我希望它看起来像我在下面制作的油漆图像。

有什么想法吗？

.total-center {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }
#contact-section {
	width: 100%;
	background: #00a16d;
}
#contact-section-wrap {
	padding: 2%;
}
#contact-section-left, #contact-section-right {
	height: 100%;
	display: inline-block;
	color: #FFF;
	font-size: 1.5em;
	padding: 1% 0;
	position: relative;
}
#contact-section-left {
	width: 60%;
	border-right: 1px solid #FFF;
	font-style: italic;
}
#contact-section-right {
	width: 30%;
	text-align: center;
}
#contact-img {
	background-image: url("../icons/envelope.png");
	background-repeat: no-repeat;
	background-size: auto;
	margin: 0 auto;
	display: block;
	width: 128px;
	height: 128px;
	position: relative;
}
#contact-width {
	width: 200%;
	font-size: 2em;
}
.total-width {
	width: 100%;
}

<div id="contact-section">
		<div id="contact-section-wrap">
			<div id="contact-section-left">
				<div class="total-center total-width">Tell us more about your project.</div>
			</div><div id="contact-section-right">
				<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
			</div>
		</div>
	</div>

Answer 1

您的整个代码可以简化如下。我在其间使用了一个伪元素作为垂直线，并通过flexbox将位置移动到order。

<强> jsFiddle

#contact-section {
  display: flex;
  justify-content: space-around;
  align-items: center;
  color: #FFF;
  background: #00a16d;
  padding: 1em 2em;
}

#contact-section:before {
  content: "";
  flex: 0 0 1px;
  height: 2em;
  background: #fff;
  order: 2;
}

#contact-section-left {
  font-size: 1.5em;
  order: 1;
  font-style: italic;
}

#contact-section-right {
  background: url("https://i.imgur.com/cLMHUZE.png") center / contain no-repeat;
  font-size: 2em;
  order: 3;
  padding: .5em 0;
}

<div id="contact-section">
  <div id="contact-section-left">Tell us more about your project.</div>
  <div id="contact-section-right">Contact us</div>
</div>

Answer 2

将display: flex; align-items: center;分配给左/右部分的父级将并排显示它们并将它们垂直居中。然后，如果将右边界（右边）从右边（较短）元素移动到右边（更高）元素的右边界，则该边框应该看起来更像你想要的那样。

.total-center {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
 }
#contact-section {
	width: 100%;
	background: #00a16d;
}
#contact-section-wrap {
	padding: 2%;
    display: flex;
    align-items: center;
}
#contact-section-left, #contact-section-right {
	height: 100%;
	display: inline-block;
	color: #FFF;
	font-size: 1.5em;
	padding: 1% 0;
	position: relative;
}
#contact-section-left {
	width: 60%;
	font-style: italic;
}
#contact-section-right {
	width: 30%;
	text-align: center;
    border-left: 1px solid #FFF;
}
#contact-img {
	background-image: url("../icons/envelope.png");
	background-repeat: no-repeat;
	background-size: auto;
	margin: 0 auto;
	display: block;
	width: 128px;
	height: 128px;
	position: relative;
}
#contact-width {
	width: 200%;
	font-size: 2em;
}
.total-width {
	width: 100%;
}

<div id="contact-section">
		<div id="contact-section-wrap">
			<div id="contact-section-left">
				<div class="total-center total-width">Tell us more about your project.</div>
			</div><div id="contact-section-right">
				<div id="contact-img"><span class="total-center" id="contact-width">Contact us</span></div>
			</div>
		</div>
	</div>

Answer 3

您的#contact-section-wrap没有高度。你设置的height: 100%并没有真正做任何事情。他们仍然依赖父母的高度来了解他们100％获得的成就。

尝试在#contact-section-wrap上设置身高。