부트 스트랩을 사용하는 열의 가운데 미디어 div

Question

나는 html 템플릿 페이지가 있습니다. 템플릿에는 로고와 텍스트가있는 미디어 객체가 있습니다. 두 항목 모두 너비가 5 인 열에있는 방법입니다. 그것은 중앙에서 벗어나서 왼쪽으로 정렬됩니다. 나는 미디어 블럭을 가져 와서 칼럼이 얼마나 큰 지 상관없이 칼럼 안에 놓기를 원합니다 (5,7,9,12). 이를 수행하는 가장 좋은 방법은 무엇입니까? 다음은 html 코드입니다. 부트 스트랩 3.3.7 및 4.0.0 베타의 최신 버전을 사용하고 있습니다. 난 당신이 부트 스트랩을 사용하는 볼 수 있듯이

Answer 1

, 그냥 내부 요소 가운데 정렬을 위해 col-xl-5 col-lg-5에 text-center 클래스를 배치 : 여기

<div class="row"> 

    <div class="col-xl-5 col-lg-5"> 
     <div class="media"> 
     <img class="align-self-center mr-3 welcome-icon-size" src="{% static 'images/yap-logo-possible-1.png'%}" alt="Generic placeholder image"> 
     <div class="media-body"> 
      <h1 class="mt-0 welcome_title">Split Beta</h1> 
     </div> 
     </div> 
    </div> 

    </div> 

는 표시입니다. 내부 요소 스타일링을 위해 자신의 클래스 logo을 사용할 수 있습니다.

.logo { 
 
    display: inline-block 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="row"> 
 
    <div class="col-xl-5 col-lg-5 text-center"> 
 
    <div class="logo"> 
 
     <img class="align-self-center mr-3 welcome-icon-size" src="http://via.placeholder.com/350x150" alt="Generic placeholder image"> 
 
     <h1 class="mt-0 welcome_title">Split Beta</h1> 
 
    </div> 
 
    </div> 
 
</div>