【发布时间】：2017-04-19 22:05:39
【问题描述】：
我在水平和垂直文本对齐和响应式设计方面遇到了一些问题：
情况：
- 我使用 Bootstrap
- 该行被分隔为大小相同的两列 (col-sm-6 / 50%)
- 对于左列，我想应用背景图像
- 对于右边的列，我想加一个文字（对图片的描述）
- 为了保持两列的尺寸相同，我在两列中添加了一个 背景-相同大小的图片
问题：
- 左右列应始终具有相同的维度
- 文本应始终在其列中水平和垂直居中
更多信息：
- 我尝试了几种解决方案，例如在顶部添加填充（更改位置，更改屏幕尺寸时）和使用变换：
@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.header_ueber_uns_text {
color: white;
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
padding-left: 4%;
}
.header_ueber_uns_background_image {
padding-bottom: 30.1%;
height: 0;
background-image: url('http://placehold.it/1700x645');
position: relative;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.ueber_uns_image_box_1 {
padding-bottom: 38%;
height: 0;
background-image: url('http://placehold.it/800x600');
position: relative;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.ueber_uns_image_box_2 {
padding-bottom: 38%;
height: 0;
background-image: url('https://cdn.shopify.com/s/files/1/1867/9985/files/backgrundi.jpg?6191691157048477587');
position: relative;
overflow: hidden;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.ueber_uns_text {
color: grey;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 50px;
}<div class="container-fluid">
<div class="row">
<div class="col-lg-12 header_ueber_uns_background_image ">
<div class="header_ueber_uns_text">
<h6>ÜBER UNS</h6>
<h3>KREATIVES DESIGN AUS BERLIN</h3>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-6 col-xs-12 ueber_uns_image_box_1">
</div>
<div class="col-sm-6 ueber_uns_image_box_2">
<div class="ueber_uns_text">
<img src="Images/werkzeug_moebel_freund_manufaktur-300x243.png" width="100px" alt="">
<h6>ÜBER UNS</h6>
<p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xs-12 ueber_uns_image_box_2">
<div class="ueber_uns_text">
<h6>ÜBER UNS</h6>
<p>Seit Jahren designen und bauen wir für unseren Bekanntenkreis. Nach dem Studium gaben wir unserer Leidenschaft Raum. Wir widmeten uns ganz einem Material (Kupfer) und einem Möbelstück (dem Hocker). Freunde lichteten unsere Debutserie ab und öffneten uns damit die Türen zu renommierten Design-Adressen. Inzwischen sind wir zu dritt, haben ein Atelier in Weißensee und arbeiten dort auch mit vielen anderen Kreativen und Künstlern zusammen.</p>
</div>
</div>
<div class="col-sm-6 ueber_uns_image_box_1">
</div>
</div>
</div>
【问题讨论】：
标签： html css responsive-design