Html 使用引导在Div中添加水平和垂直响应填充

我在水平和垂直文本对齐和响应设计方面遇到一些问题：

情况：

• 我使用引导
• 该行分为两列，大小相同（col-sm-6/50%）
• 对于左列，我想应用背景图像
• 对于右边的列，我想添加一个文本（图片的描述）
• 为了保持两列的尺寸相同，我在两列中都添加了a 相同大小的背景图像

问题是：

• 左右列的尺寸应始终相同
• 文本应始终在其列中水平和垂直居中

更多信息：

• 我尝试了几种解决方案，比如在顶部添加填充（改变位置，改变屏幕大小）和使用transform：

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.header\u ueber\u uns\u文本{
颜色：白色；
宽度：100%；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
左：4%；
}
.header_ueber_uns_背景_图像{
垫底：30.1%；
身高：0；
背景图像：url（'http://placehold.it/1700x645');
位置：相对位置；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.ueber_uns_图像_框_1{
垫底：38%；
身高：0；
背景图像：url（'http://placehold.it/800x600');
位置：相对位置；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.ueber_uns_图像_框_2{
垫底：38%；
身高：0；
背景图像：url（'https://cdn.shopify.com/s/files/1/1867/9985/files/backgrundi.jpg?6191691157048477587');
位置：相对位置；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.ueber_uns_文本{
颜色：灰色；
文本对齐：居中；
左侧填充：50px；
右边填充：50px；
填充顶部：50px；
}

ÜBER UNS
德国柏林设计学院
ÜBER UNS
我们的设计和设计都是如此。没有人会对莱登沙夫特·劳姆进行研究。这是一种材料（库普费尔）和一种材料（霍克）。弗伦德·利希泰滕（Freunde lichteten）未经公开的设计地址是一家设计公司。在威斯康星州，位于维昂塞和阿尔贝滕的画室是一个由克里蒂文和昆斯特伦·祖萨曼设计的画室

ÜBER UNS
我们的设计和设计都是如此。没有人会对莱登沙夫特·劳姆进行研究。这是一种材料（库普费尔）和一种材料（霍克）。弗伦德·利希泰滕（Freunde lichteten）未经公开的设计地址是一家设计公司。在威斯康星州，位于维昂塞和阿尔贝滕的画室是一个由克里蒂文和昆斯特伦·祖萨曼设计的画室

在第一列中使用img标记显示图像，而不是将其添加为背景图像：

<div class="col-sm-6"><img src="your-image-url-here" /></div>
<div class="col-sm-6" style="text-align:center;line-height:[height-of-your-image-here];"><p style="vertical-align: middle;">Your text here</p></div>

您的文本在此显示

@导入url（'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.header\u ueber\u uns\u文本{
颜色：白色；
宽度：50%；
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
-ms转换：翻译（-50%，-50%）；
左：4%；
}
.header_ueber_uns_背景_图像{
垫底：30.1%；
身高：0；
背景图像：url（'http://placehold.it/1700x645');
位置：相对位置；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.ueber_uns_图像_框_1{
垫底：38%；
身高：0；
背景图像：url（'http://placehold.it/800x600');
位置：相对位置；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.ueber_uns_图像_框_2{
垫底：38%；
身高：0；
背景图像：url（'https://cdn.shopify.com/s/files/1/1867/9985/files/backgrundi.jpg?6191691157048477587');
位置：相对位置；
溢出：隐藏；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
}
.ueber_uns_文本{
颜色：灰色；
文本对齐：居中；
左侧填充：50px；
右边填充：50px；
填充顶部：50px；
}

ÜBER UNS
德国柏林设计学院