html - 使用 Bootstrap 在 Div 中添加水平和垂直响应填充

Question

我在水平和垂直文本对齐以及响应式设计方面遇到了一些问题:

情况:

• 我使用 Bootstrap
• 该行被分成两列，大小相同 (col-sm-6/50%)
• 对于左列，我想应用背景图像
• 对于右边的Column，我想添加一段文字(对图片的描述)
• 为了保持两个列的尺寸相同，我在两个列中添加了一个 相同尺寸的背景图片

问题:

• 左右列应始终具有相同的维度
• 文本应始终在其列中水平和垂直居中

更多信息:

• 我尝试了几种解决方案，例如在顶部添加填充(在更改屏幕尺寸时更改位置)和使用转换:

@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>    
    

Answer 1

在第一列中使用 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>