Html 对中问题内联块div元素

我遇到了一个问题，我的

联系人部分左侧

未在父分区中居中。这不是

垂直对齐：顶部

问题。您可以看到右侧的

边框

白线，它显示了

联系人部分左侧

div的高度延伸，但我希望它与图像右侧的大小相同（很抱歉，示例中没有图像）

我不确定我是不是走错了路，但我希望它看起来像我在下面画的画

有什么想法吗

。总中心{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
#接触段{
宽度：100%；
背景：#00a16d；
}
#接触截面缠绕{
填充：2%；
}
#触点部分左侧，#触点部分右侧{
身高：100%；
显示：内联块；
颜色：#FFF；
字号：1.5em；
填充：1%0；
位置：相对位置；
}
#接触段左{
宽度：60%；
右边框：1px实心#FFF；
字体：斜体；
}
#右联络处{
宽度：30%；
文本对齐：居中；
}
#联系img{
背景图像：url（“../icons/envelope.png”）；
背景重复：无重复；
背景尺寸：自动；
保证金：0自动；
显示：块；
宽度：128px；
高度：128px；
位置：相对位置；
}
#接触宽度{
宽度：200%；
字号：2em；
}
.总宽度{
宽度：100%；
}

告诉我们更多关于你的项目。
联系我们

辅助

显示：flex；对齐项目：居中将并排显示它们，并垂直居中显示它们。然后，如果将边框从左（较短）元素向右移动到右（较高）元素的右边框，则线条看起来应该更像您想要的


。总中心{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
#接触段{
宽度：100%；
背景：#00a16d；
}
#接触截面缠绕{
填充：2%；
显示器：flex；
对齐项目：居中；
}
#触点部分左侧，#触点部分右侧{
身高：100%；
显示：内联块；
颜色：#FFF；
字号：1.5em；
填充：1%0；
位置：相对位置；
}
#接触段左{
宽度：60%；
字体：斜体；
}
#右联络处{
宽度：30%；
文本对齐：居中；
左边框：1px实心#FFF；
}
#联系img{
背景图像：url（“../icons/envelope.png”）；
背景重复：无重复；
背景尺寸：自动；
保证金：0自动；
显示：块；
宽度：128px；
高度：128px；
位置：相对位置；
}
#接触宽度{
宽度：200%；
字号：2em；
}
.总宽度{
宽度：100%；
}

告诉我们更多关于你的项目。
联系我们
辅助
显示：flex；对齐项目：居中将并排显示它们，并垂直居中显示它们。然后，如果将边框从左（较短）元素向右移动到右（较高）元素的右边框，则线条看起来应该更像您想要的


。总中心{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
#接触段{
宽度：100%；
背景：#00a16d；
}
#接触截面缠绕{
填充：2%；
显示器：flex；
对齐项目：居中；
}
#触点部分左侧，#触点部分右侧{
身高：100%；
显示：内联块；
颜色：#FFF；
字号：1.5em；
填充：1%0；
位置：相对位置；
}
#接触段左{
宽度：60%；
字体：斜体；
}
#右联络处{
宽度：30%；
文本对齐：居中；
左边框：1px实心#FFF；
}
#联系img{
背景图像：url（“../icons/envelope.png”）；
背景重复：无重复；
背景尺寸：自动；
保证金：0自动；
显示：块；
宽度：128px；
高度：128px；
位置：相对位置；
}
#接触宽度{
宽度：200%；
字号：2em；
}
.总宽度{
宽度：100%；
}

告诉我们更多关于你的项目。
联系我们
您的
#contact section wrap
没有高度。您正在设置的
height:100%
s实际上没有做任何事情。他们仍然依靠父母的身高来知道自己100%得到了什么

尝试在
#联系人部分包裹
上设置高度，您的
#联系人部分包裹
没有高度。您正在设置的
height:100%
s实际上没有做任何事情。他们仍然依靠父母的身高来知道自己100%得到了什么

请尝试在
#联系人截面环绕
上设置一个高度，您的整个代码可以简化如下。我使用一个伪元素作为中间的垂直线，并通过flexbox按顺序移动位置



#联系部分{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
颜色：#FFF；
背景：#00a16d；
填料：1米2米；
}
#联络组：前{
内容：“；
弹性：0 0 1px；
高度：2米；
背景：#fff；
顺序：2；
}
#接触段左{
字号：1.5em；
顺序：1；
字体：斜体；
}
#右联络处{
背景：url（“https://i.imgur.com/cLMHUZE.png）居中/不包含重复项；
字号：2em；
顺序：3；
填充：.5em0；
}

告诉我们更多关于你的项目。
联系我们
您的整个代码可以简化如下。我使用一个伪元素作为中间的垂直线，并通过flexbox按顺序移动位置



#联系部分{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
颜色：#FFF；
背景：#00a16d；