在行内居中放置div

Question

好吧，我知道我只是犯了一个初学者的错误，但我似乎找不到答案。我打算使用jumbotron类，但发现文本更改并不是我想要的。我需要创建一个100%宽度的容器-流体与行和列第一列将包含屏幕的50%的图像。另一半需要垂直居中和水平居中。另一个问题是，它需要与其正下方的标题对齐。这是我的代码，我将尝试为任何试图帮助我的人做引导。

好的，我不确定我会在那里保存多长时间，但这是我的屏幕截图，红色矩形是问题，或者模块需要放在哪里：https://www.chrobinson.com/en-us/-/media/177FC7F22DA6496AB26BAA75C230BE41.ash

引导：http://www.bootply.com/i5cb1GIdxk

    <style>
    /* LESS Document */

/*********  TMC QUERIES  *********/
@tmcGreen:#c0c920;
@tmcLightblue:#4fb4e1;
@tmcDarkblue:#003a63;
@tmcOrange:#c05d1a;
@tmcDarkgrey:#939598;
@tmcLightgrey:#c7c8ca;

/************ CUSTOM FONTS **************/


/************* BASIC STYLES **************/
a {
    color:@tmcLightblue;
    text-decoration:none;
    }
a:hover {
    text-decoration:none;
    }
p {
    margin: 10px 0;
    }
body{
    font-family:"Lato";
    }
html,body {
    height:100%;
    }

/*********  NAV STYLES  *********/
.dividerNav{
    height:4px;
    background-color:#fff;
    }
.navbar.navbar-default > .container{
    border-bottom:1px solid @tmcDarkblue
    }
.menu-toggle-text{
    color:#4fb4e1;
    }
.navbar-toggle{
    border:none;
    padding:9px 1px;
    }
.navbar-toggle:hover .navbar-toggle:focus{
    background-color:none;
    }
.hover-dropdown{
    background-color:transparent;
    }
.hover-dropdown ul{
    border: medium none;
    border-radius:0px;
    background-color: rgba(0,58,99,0.80);
    padding: 25px 0;
    }
.navbar .hover-dropdown li a{
    color:#fff;
    margin: 0 18px;
    }
.header-list{
    margin-bottom:4px; 
    margin-top:15px;
    }
.navbar-brand{
    text-indent:-999px; 
    max-width:234px; 
    width:100%; 
    height:auto;
    }
.nav > li {
    display: block;
    position: static; 
    margin: 0 25px 0 0;
    }
.subscribe-input, .form-control:focus{
    box-shadow:none; 
    border-color:@tmcDarkblue;
    }
.navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
    }
.navbar {
    text-align: center;
    margin-bottom:8px; 
    border-bottom:none; 
    border-top:0px; 
    border-radius:0px; 
    border-left:0px; 
    border-right:0px; 
    border-top:0px;
    }
.modeSelector{
    right:57px;
    }
.dropdown a{
    text-decoration:none;
    }
.navbar .hover-dropdown li a:hover {
    text-decoration:none;
    color:@tmcLightblue;
    }
.dropdown-menu{
    width:100%;
    text-align:center;
    box-shadow:none;
    border:none;
    border-radius:0;
    }
.modes{
    border:1px solid @tmcDarkblue;
    border-radius:0px; 
    text-align:left;
    }
.modes li a{
    color:@tmcDarkblue;
    }
.modes li a:hover{
    color:@tmcLightblue;
    }
.user-input, .pass-input{
    width:41.5%;
    float:left;
    }
.search-input{
    width:82%;
    }
.subscribe-input, .form-control{
    border-radius:0px;
    border-color:@tmcDarkblue;
    color:@tmcDarkgrey;
    float:left;
    margin-right:4px;
    }
.glyphicon-arrow-right{
    color:#c05d1a;
    }
.glyphicon-search{
    color:#c05d1a;
    }
.logo, .search-wrapper {
    padding-top:39px
    }
/*********  HEADER STYLES  *********/
.hero-image{
    margin-bottom:50px;
    }
.headlineHero a, .headlineHero a:hover{
    color:#fff;
    }
.heroWrapper{
    position:relative;
    margin:0 0 50px;
    }
.heroText{
    position: absolute;
    top: 35%;
    width: 100%;
    }
.heroContainer{
    margin: 0px auto;
    }
.intro-text{
    margin:0 auto;
    background-color: rgba(106,69,52,0.32);
    border: 2px solid #fff;
    color:#fff;
    text-align:center;
    }
.intro-text h2 {
    font-size:x-large;
    margin: 15px 0 5px;
    }
.headlineHero{
    font-family:"lato";
    font-weight:bold;
    }
.intro-text h3 {
    font-size:medium;
    margin: 8px 0 10px;
    }
.btn-default{
    border-color:#c05d1a;
    border-radius:0px;
    }
.btn-hero, .hero-btn:hover, .hero-btn:active, .hero-btn:focus{
    margin:0 auto;
    color:#fff !important;
    border:1px solid #fff !important;
    background-color:transparent !important;
    }
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
    }
.glyphicon-hero{
    color:#fff !important;
    }
.image-responsive{
    display: block; 
    height: auto; 
    width: 100%;
    }
#navbar-collapse-2, #navbar-collapse-1{
    position: static; 
    width: 100%; 
    z-index: 2147483647;
    }
.nav > li.dropdown{
    /*border-bottom:2px solid #fff;*/
    }
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
    color:@tmcLightblue;
    background-color:none; 
    background:none; 
    border-bottom:2px solid @tmcDarkblue;
    }
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: transparent; 
    color:@tmcLightblue;
    }
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
    background-color: transparent !important; 
    color: @tmcLightblue;
    }
.navbar-nav > li > a{
    border-bottom:2px solid #fff;
    }
.btn-default:hover, .btn-default:focus, .btn-default.focus, .btn-default:active, .btn-default.active, .open > .dropdown-toggle.btn-default {
    background-color: #fff; 
    border-color: @tmcOrange; 
    color: #fff;
    }
.glyphicon .glyphicon-search:hover {
    color: #fff;
    }

/********* HEADLINES *********/
.headlineBorder{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid @tmcGreen;
    }
.headlineBorderblue{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid @tmcDarkblue;
    }
.headlineBorderwhite{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid #fff;
    color:#fff;
    }

.btn-blue{
    border-color:@tmcLightblue;
    }
.btn-blue:hover, .btn-blue:active, .btn-blue:focus{
    background-color:@tmcDarkblue; 
    border-color:#fff;
    }
.glyphicon-menu-right:hover{
    color:#fff !important;
    }
.headlineGlyph:hover{
    color:@tmcLightblue !important;
    }
.btn-mobile-right {
    border:none;
    }
.btn-mobile-right:hover, .btn-mobile-right:focus, .btn-mobile-right.focus, .btn-mobile-right:active, .btn-mobile-right.active, .open > .dropdown-toggle.btn-default {
    background-color: transparent;
    }
.glyphicon-menu-right, .glyphicon-menu-left{
    /*color:@tmcLightblue;*/
    }
.glyphicon-menu-right:hover, .glyphicon-menu-left:hover{
    color:#fff;
    }

.fourXfour{
    margin-bottom: 50px;
    }

/********* INSIDE PAGE HERO IMAGE ************/
.insideHero{padding:0;}
.insidePagehero{
    display: block;
    height: auto;
    width: 100%;
    }
.halfHero{
    padding:0;
    }
.insideHerocolorPicker{
    background:orange;
    }
.pageIntroheadline{
    display: inline-block;
    color:#fff;
    }
/*********  HOMEPAGE MARKETING AREA  *********/
.marketing-wrapper{
    width:100%; 
    margin-top:50px;
    margin-bottom:50px;
    }
.mareting-section{
    padding:0;
    }
/************************* FLIPPING STYLES *******************/
.marketing-wrapper.container-fluid{
    padding:0;
    }
.marketing-wrapper h2{
    margin-bottom:20px;
    }
.flipperWrap{
    padding:0;
    }
      .card {
        width:100%;
        max-width: 750.666px;
        height: 611px;
        margin: 0px;
        display: inline-block;
        clear:both;
      }

      .front, .back {
        padding: 0px;
      }
      .front {
        background-color: transparent;
      }
      .back {
        background-color: transparent;
      }
      .card div{

          }
.blogInside, .tmsInside, .globalInside{
    margin:80px auto; 
    height:50%; 
    width:62%;
    }
.blogBack{
    background-color:@tmcOrange; 
    color:#fff; 
    padding: 0px;
    }
.blogIcon{
    background:url("../images/blogIcon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 46px; 
    float:left; 
    margin:0 22px 0 0;
    }
.tmsBack{
    background-color:@tmcDarkblue; 
    color:#fff; 
    padding: 0px;
    }
.tmsIcon{
    background:url('../images/tmsIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 46px; 
    float:left; 
    margin:0 22px 0 0;
    }
.globalBack{
    background-color:@tmcLightblue; 
    color:#fff;
    padding: 0px;
    }
.globalIcon{
    background:url('../images/globalIcon.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0); 
    display: inline-block; 
    height: 38px; 
    width: 38px; 
    float:left; 
    margin:0 22px 0 0;
    }

/**************** LEADERSHIP SLIDER STYLES *****************/
.leadershipSlider{
    margin-top:50px;
    }
.leadershipCol {
    float: left;
    }
.leadershipName{
    color:#fff; 
    height:auto; 
    width:62%; 
    background-color:@tmcOrange; 
    padding:10px; 
    margin:-85px 0 0 38%; 
    border:1px solid #fff; 
    display:block; 
    float:left;
    }
.leadershipName .glyphicon.glyphicon-menu-right.pull-right{
    color:#fff; 
    margin:-8px 0;
    }
.leadershipImg{
    display:block; 
    float:left
    }
#carousel-index{
    margin:5px 0 0;
    }
.thumbnail {
    display: block; 
    padding: 4px; 
    margin-bottom: 0px; 
    line-height: 1.42857143; 
    -webkit-transition: all .2s ease-in-out; 
    transition: all .2s ease-in-out; 
    border-radius: 0; border: none; 
    background-color: transparent;
    }
.carousel-control {
    top: 0; 
    left: 0; 
    bottom: 0; 
    width: 15%; 
    opacity: 1; 
    font-size: 20px; 
    color: #fff; 
    text-align: center; 
    text-shadow: none;
    }
.carousel-control.left {
    background-image: none; 
    position:relative; 
    display:table; 
    height:45px;
    width:45px;
    }
.carousel-control.right {
    left: auto; 
    position:relative; 
    right: 0; 
    background-image: none; 
    display:table;
    height:45px;
    width:45px;
    }
.carousel-control {
    padding-top:0;
    }
.well{
    background-color: transparent; 
    padding: 0px; 
    border: 0px solid #fff; 
    box-shadow:none; 
    border-radius: 0px; 
    margin-bottom: 0px;
    }
.btn-darkBlue{
    border-color:#fff; 
    background-color:@tmcDarkblue; 
    height:45px;
    width:45px;
    }
.btn-darkBlue:hover, .btn-darkBlue:active, .btn-darkBlue:focus{
    border-color:#fff; 
    background-color:@tmcDarkblue;
    }
.carouselNext, .carouselPrev {
    color:#fff;
    }
/**************** My Carousel Feed Styles ****************/
.myFeed .active{
    background-color:@tmcDarkblue;
    }
.carousel-indicators li {
    background-color: rgba(0, 0, 0, 0); 
    border: 1px solid @tmcDarkblue;
    }
.feedSlider{
    margin-top:80px;
    }
.myFeed {
    bottom: 0px; 
    left: 0; 
    list-style: outside none none; 
    margin-left: 0; 
    position:relative; 
    text-align: center; 
    width: 100%;
    }
.headlineBorderblue{
    display:inline; 
    text-transform:uppercase; 
    border-bottom:3px solid @tmcDarkblue;
    }
.headlineTitle{
    padding: 4px 0;
    }
.headlineGlyph{
    color:@tmcLightblue; 
    margin:-25px 0;
    }
.headlineGlyph:hover{
    color:@tmcDarkblue;
    }
.headlineWrapper{
    border-bottom:1px solid @tmcDarkblue;
    width:60%;
    }
.headlineWrapper-green{
    border-bottom:1px solid @tmcGreen; 
    width:60%;
    }
.headlineWrapper-white{
    border-bottom:1px solid #fff; 
    width:60%;
    }
.myfeedDigit{
    color:@tmcDarkblue; 
    font-size:5em; 
    float:left; 
    clear:both;
    }
/********  BEGIN FOOTER STYLES *********/
.footer{
    border-top:1px solid @tmcDarkblue; 
    margin:50px auto; 
    padding-top:25px;
    }
.subscribeText{
    color:@tmcLightblue; 
    margin:-4px 0 4px; 
    font-size:12px;
    }
.subscribe-input{
    width:78% !important;
    }
.copywriteText{
    color:@tmcDarkgrey; 
    font-size:9.5px;
    }
.footerSocialwrapper{
    float:right;
    text-align:center;
    }
.languageSelector{
    float:left;
    }
.subscribeForm{
    float:right;
    }
.subscribe-form{
    float:none;
    margin:0 auto; 
    width:100%;
    }
.subWrapper {
    float: left; 
    width: 100%;
    }
.btnSubscribe {
    float: left;
    height: 34px;
    width: 34px;
    }

@media (max-width:@screen-lg) {
    .card{
        height:384px;
        } 
    }
@media (max-width:@screen-md) {
    .card{
        height:300px;
        } 
    .navbar-nav > li > a {
        border-bottom: 0px solid #fff;
        }
    .modeSelector{
        right:0px;
        }
    .search-input{
        width:78%;
        }
    .user-input, .pass-input{
        width:37%;
        }
    /*FOOTER*/
    .footerSocialwrapper{
        float:right; 
        margin:10px auto;
        }
    .footerSocial li{
        padding-right: 5px; 
        padding-left:0px;
        float:left; 
        width:20%;
        display:inline;
        height:auto;
        }
    .subscribeForm{
        float:right;
        }
    .footerSocial {
        margin: auto; 
/*      width: 100%;*/
        display:inline-block;
        } 
    .subscribe-input {
        float: left;
        width: 80% !important;
        }
    }
@media (max-width:@screen-sm) {
    /*FEEDSLIDER*/ 
    .headlineWrapper, .headlineWrapper-green, .headlineWrapper-white{
        width:80%;
        }
    .mobile{
        color:#fff;
        } 
    .headlineHero{
        font-size:small;
        }
    .heroText{
        top: 15%;
        }
    .skills{
        font-size:x-small;
        } 
    .navbar-collapse{
        background-color: rgba(0,58,99,0.80);
        }
    .navbar-nav{
        margin:15px -15px;
        } 
    .nav > li > a{
        text-align:left; 
        padding-left:0px; 
        padding-right:0px; 
        color:#fff !important;
        } 
    .nav > li > a:hover{
        color:@tmcLightblue !important;
        } 
    .nav > li{
        margin:0px;
        }
    .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{
        border-bottom:0px solid transparent;
         color:@tmcLightblue !important;
        }
    .navbar-brand{
        max-width:156px;
        margin:0 0 0 5px;
        } 
    #navbar-collapse-2, #navbar-collapse-1{
        position: absolute; 
        width: 100%; 
        z-index: 2147483647;
        }
    .subscribe-input{
        border-radius:0px; 
        border-color:@tmcDarkblue; 
        color:@tmcDarkgrey; 
        float:left; 
        margin-right:4px;
        } 
    .search-form{
        background-color:transparent !important; 
        color:#fff;
        }
    .mobileSearch-btn{
        border-color: #fff; 
        background-color:transparent;
        } 
    .mobileSearch-btn:hover{
        border-color: #fff; 
        background-color:transparent;
        } 
    .glyphicon-search {
        color: #fff;
        } 
    .glyphicon-arrow-right{
        color: #fff;
        }
    .mobileLogin{
        text-align:left;
        } 
    .login-control{
        float:none;
        }
    .user-input, .pass-input{
        margin:0 0 5px 0;
        width:100%; 
        float:none;
        } 
    .dropdown-menu{
        text-align:left;
        } 
    .mobileDropdown{
        background-color: transparent !important; 
        border: 1px solid #fff !important; 
        color: #fff; 
        margin: 5px 0 0; 
        padding: 6px 13px; 
        display: block;
        } 
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        background-color: #fff; 
        padding: 5px 0;
        } 
    .mobileList{ 
        background-color: #fff !important;
        border-radius: 0;
        padding: 0;
    } 
    .navbar-nav .open .mobileList{
        position:absolute; 
        width:100%;
        } 
    .mobileList li{
        padding:4px 14px; 
        border-bottom:1px solid @tmcDarkblue;
        }
    /*Footer*/ 
    .footerSocial{
        /*float:left;*/
        }
    .languageSelector img {
        margin: 0 auto;
        }
    .footerSocial {
        margin: 10px auto;
        }
    .footerSocial img{
        height:auto;
        } 
    .subscribe-input {
        width: 82% !important;
        }
    .subscribeForm{
        float:none;
        height:auto;
        margin:0 auto;
        width:95%;
        } 
    .subscribeArrow{
        color:@tmcOrange !important;
        } 
    .card{
        height: 591px;
        } 
    }
@media (max-width:@screen-xs) { 
    .card{
        height: 275px;
        }
    }
    </style>

 <div class="container-fluid heroWrapper insideHerocolorPicker">
    <div class="row">
        <div class="col-sm-5">
            <img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
        </div>
        <div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
          <div class="">
             <div class="headlineWrapper-white">
                  <div class="headlineTitle">
                      <h2 class="headlineBorderwhite">ABOUT</h2>
                  </div>
              </div>
              <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
          </div>
        </div>
    </div>
</div> 



    <div class="container">
        <div class="row">
                <div class="col-sm-5 col-sm-offset-1 fourXfour">
                    <div class="">
                        <div class="headlineWrapper-green">
                            <div class="headlineTitle">
                                <h2 class="headlineBorder">WELCOME</h2>
                            </div>
                        </div>
                        <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                        <a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
                    </div>
                </div>
                <div class="col-sm-5 col-sm-offset-1 fourXfour">
                    <div class="">
                        <div class="headlineWrapper-green">
                            <div class="headlineTitle">
                                <h2 class="headlineBorder">WELCOME</h2>
                            </div>
                        </div>
                        <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
                        <a href="#"><button type="go" class="btn btn-default btn-blue"><i class="glyphicon glyphicon-menu-right"></i></button></a>
                    </div>
                </div>
        </div>
    </div>

Answer 1

我觉得这是我最好的解决方案。我在css中使用了屏幕的微断点来实现这一点。我还必须改变我的结构，因为我不能得到下面的标题正确排列。下面是我所做的：http://www.bootply.com/i5cb1GIdxk

<div class="container-fluid heroWrapper insideHerocolorPicker">
    <div class="row">
        <div class="col-sm-6 pageHero">
            <img class="image-responsive insidePagehero" src="images/aboutHero.jpg" alt="" />
        </div>
        <div class="container">
            <div class="row">
              <div class="col-sm-5 col-sm-offset-1 pageIntroheadline">
                 <div class="headlineWrapper-white">
                      <div class="headlineTitle">
                          <h2 class="headlineBorderwhite">ABOUT</h2>
                      </div>
                  </div>
                  <p>TMC is..... nisi ut aliquip ex ea commodo consequat. consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
              </div>
            </div>
        </div>
    </div>
</div>