Bootstrap Заголовок CSS Позиционирование

Question

Picture of what I am trying to accomplish

Jsfiddle

Привет всем,

Я пытаюсь выполнить позицию CSS в картине, что я предоставил. Размеры коробки 600 Вт X 380 H. Однако я пытаюсь использовать jumbotron, и я перезаписал css, но результат не был тем, что я хотел. Может ли кто-нибудь помочь мне, что я делаю неправильно?

* { 
 
    max-width: 933px; 
 
    margin: 0 auto; 
 
} 
 

 
.btn { 
 
    border-radius: 0px; 
 
} 
 

 
/* Navigation */ 
 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 

 
} 
 

 
.navbar { 
 
    text-align: center; 
 
    font-size: 10px; 
 
    margin-bottom: -11px; 
 
} 
 

 
/* Navigation END */ 
 

 

 

 
.program-name-banner { 
 
    background: red; 
 
    text-align: center; 
 
    font-weight:bold; 
 
    margin: 8px 0px; 
 
} 
 

 
.btn.btn-center { 
 
    display:block; margin: 0 auto; 
 
} 
 

 

 
.border { 
 
    border: 1px solid #eee; 
 
    margin: 30px 50px; 
 
} 
 

 
.jumbotron { 
 
    margin: 0px; 
 
    height: 380px; 
 
} 
 

 

 
/* Main Story */ 
 
.main-story { 
 
    margin: 108px 0 145.344px 340px; 
 
} 
 

 
.main-story .main-story-description { 
 
    font-size: 13.33px; 
 
} 
 

 
.btn-font-size { 
 
    font-size: 10.05px 
 
} 
 

 
/* Main Story END */

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class = "container-fluid border"> 
 

 
<nav class="navbar hidden-xs hidden-sm"> 
 
      <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">LOREM IPSUN</a></li> 
 
      <li><a href="#about">LOREM IPSUN</a></li> 
 
      <li><a href="#contact">LOREM IPSUN</a></li> 
 
      <li><a href="#contact">LOREM IPSUN</a></li> 
 
      <li><a href="#contact">LOREM IPSUN</a></li> 
 
      </ul> 
 
</nav> 
 
    
 
    <div class="jumbotron"> 
 
    <div class="main-story"> 
 
    <h2 class = "text-center">MAIN STORY TITLE<br/>GOES HERE</h2> 
 
    <p class = "main-story-description text-center">Mauris commodo aliquam metus,quis fermentum arcu laculis vel. Phasellus nec leo ac sapien venenatis scelerisque. Nulla facilisi. Morbi ac tortor nec neque interdum hendrerit a et color</p> 
 
    <button class = "btn btn-primary btn-center btn-font-size">CALL TO ACTION HERE</button> 
 
    </div> 
 
</div> 
 
    
 
    <hr> 
 
    
 
</div>

Answer 1

Если вы хотите расположить внутренний блок в середине вертикали и выровнен вправо по горизонтали, изменение:

.jumbotron { 
    margin: 0px; 
    height: 380px; 
    position: relative; 
} 
/* Main Story */ 
.main-story { 
    max-width: 50%; 
    position: absolute; 
    right: 0px; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    top: 50%; 
    padding: 5%; 
} 
.main-story h2 { 
    margin-top: 0; 
} 

Fiddle: http://jsfiddle.net/fuat3d0z/1/

Answer 2

Вы можете использовать этот css ниже .main-story класс

margin: 28px 0 0px 0px; 
float: right; 
max-width: 240px; 

Посмотреть мою живую демонстрацию на jsfiddle