Дисплей встроенный блок (вертикальный центр) не работает - bootstrap

Я использую bootstrap для создания макета, однако я не могу понять, почему отображение: встроенный блок с вертикальным выравниванием: средний не работает.Дисплей встроенный блок (вертикальный центр) не работает - bootstrap

Я бы предпочел не использовать положение абсолютное.

JSFiddle: https://jsfiddle.net/yheep9hh/

Любая помощь будет оценена

HTML: В настоящее время с помощью начальной загрузки для создания макета (Navbar и т.д.)

<header> 
     <nav class="navbar navbar-transparent"> 
      <div class="container"> 
       <div class="navbar-header"> 
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#myNavbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button><a class="navbar-brand" href="#">hello</a></div> 
       <div class="collapse navbar-collapse" id="myNavbar"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a class="active" href="/Home">Home</a></li> 
         <li><a href="/Website Design">Website Design</a></li> 
         <li><a href="/Tech Support">Tech Support</a></li> 
         <li><a href="/Data Security">Data Security</a></li> 
         <li><a href="/Networking">Networking</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 
    </header> 
    <div class="container-fluid wrapper bgImage"> 
     <div class="indexWelcome"> 
      <div class="row"> 
       <div class="col-md-12"> 
        <h1 class="text-center">Welcome To Amparo Tech</h1> 
        <h3 class="text-center">How Can We Help You?</h3></div> 
      </div> 
      <div class="row input-fixedWidth"> 
       <div class="col-md-12"> 
        <form class="homeForm" method="POST"> 
         <div class="row"> 
          <div class="col-sm-8 col-sm-push-2 col-md-8"> 
           <input class="homeFormEmail" type="text" name="email" placeholder="Email"> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-sm-8 col-sm-push-2 col-md-8"> 
           <input class="homeFormPostcode" type="text" name="postcode" placeholder="Postcode"> 
          </div> 
         </div> 
         <div class="row"> 
          <div class="col-sm-8 col-sm-push-2 col-md-8"> 
           <textarea class="homeFormMessage" name="message" placeholder="Your Message or Tech Issue"></textarea> 
          </div> 
         </div> 
        </form> 
       </div> 
      </div> 
     </div> 
      <div class="push"></div> 
    </div> 
    <footer class="footer"> 
     <div class="container"> 
      <div class="row clearfix"> 
       <div class="col-md-4 text-left pull-left"> 
        <p>name</p> 
       </div> 
       <div class="col-md-4 text-right pull-right"> 
        <p>number</p> 
       </div> 
       <div class="col-md-4 text-center"> 
        <p>address</p> 
       </div> 
      </div> 
     </div> 
    </footer>

CSS: Пользовательские CSS

* { 
    box-sizing: border-box; 
} 

html, 
body { 
    height:100%; 
} 

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
    margin:0 auto; 
    margin-bottom: 10px; 
} 

.wrapper { 
    min-height:calc(100% - 82px); 
    margin: 0 auto -10px; 
} 

.footer, .push { 
    height: 10px; 
} 

.navbar { 
    margin:0; 
    height:52px; 
} 

input, textarea { 
    width: 100%; 
    margin:0 auto; 
} 

.input-fixedWidth { 
    max-width:750px; 
    margin: 0 auto; 
} 

.formWrapper { 
    position:relative; 
} 


.indexWelcome { 
    display:inline-block; 
    vertical-align:middle; 
    width: 100%; 
    text-align:center; 
} 


.navbar-transparent { 
    background-color: transparent; 
} 

.homeFormEmail { 
    margin-top: 20px; 
} 

.homeFormEmail, 
.homeFormPostcode, 
.homeFormMessage { 
    text-indent: 10px; 
    margin-bottom: 15px; 
    font-size:14px; 
} 

.homeFormEmail, 
.homeFormPostcode { 
    height:40px; 
} 

.homeFormMessage { 
    height: 80px; 
    padding-top:10px; 
    resize: vertical; 
}

источник

2016-11-06 RandomMath

Вертикально-выравненный: средний; хорошо работает с дисплеем: table-cell; то есть, если родительский div отображается: table;

источник

2016-11-06 11:16:11

Чтобы отобразить блок <div>, вертикально выровненный по центру, вам необходимо использовать дисплей table и table-cell соответственно родительскому и дочернему объектам.

Посмотрите на обновленный Fiddle (jsFiddle)

Просто нравится:

/* Parent */ 
.wrapper { 
    display: table; 
} 

/* Child */ 
.indexWelcome { 
    display: table-cell; 
}

Надеется, что это помогает!

источник

2016-11-06 12:07:11

поскольку CSS Flexbox является supported почти везде в эти дни я хотел бы использовать его, так как это делает вертикальное выравнивание очень легко:

.wrapper { 
    display:flex; 
    align-items:center; 
    justify-content:center; 
}

демо: https://jsfiddle.net/7totjt2p/2/

источник

2016-11-06 12:40:00 ilwcss

Дисплей встроенный блок (вертикальный центр) не работает - bootstrap

ответ

Смежные вопросы