부트 스트랩 3 이미지 센터와 컨텐츠를 수직 중심으로 만들기

나는 반응 형 이미지 센터를 정렬하려고 애 쓰고 있습니다. <img-responsive> 태그를 사용하지 않으면 가운데 맞춤을 수행합니다.부트 스트랩 3 이미지 센터와 컨텐츠를 수직 중심으로 만들기

이미지는 회색 자리 표시 자 사각형으로 텍스트의 가운데에 배치하고 텍스트 AND 이미지를 세로로 맞추기를 원합니다.

부트 스트랩 3을 사용하고 있습니다.

여기 내 코드입니다.

<html> 
<head> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 
<link href="css/styles.css" rel="stylesheet"> 
<title>Layout3</title> 
<style> 
    .panel1 { 
     background-color: pink; 
     height:768px; 
     align-items: center; 
    } 
    .panel2a { 
     background-color:white; 
     text-align: center; 
     align-content: center; 
     height:384px; 
     margin:0 auto; 
    } 
    .panel2b { 
     background-color:#3DB39E; 
     text-align: center; 
     align-content: center; 
     height:384px; 
     margin:0 auto; 
} 

.panel3 { 
    background-color:#efc75e; 
    height:768px; 
} 
.panel4 { 
    background-color:#e2574c; 
     height:768px; 

} 
.panel5 { 
    background-color:#3db39e; 
     height:768px; 

} 
.panel6 { 
    background-color:#e2574c; 
     height:768px; 

} 
.footer { 
    background-color:#000000; 

</style> 
    </head> 
    <body> 
    <div class="container-full"> 


<div class="col-lg-12 panel1"> 
     <div class="col-lg-6"> 
     <img class="img-responsive" src="http://placehold.it/456x366" alt="" />  
    </div> 
    <div class=" col-lg-6"> 
      <h1>Title</h1> 
     <p class="lead">description</p> 
      <p><input type="text" class="form-control" placeholder="e-mail"><a class="btn btn-large btn-success" href="#" target="ext">NOTIFY ME</a></p> 
    </div> 
</div> 



<div class="row vcenter"> 
       <div class="col-xs-12 col-md-4 panel2a"> 
        <img class="img-responsive" src="http://placehold.it/80x91" alt="" /> 
        <h1>1</h1> 
        <p>abc</p> 
       </div> 

       <div class="col-xs-12 col-md-4 panel2a"> 
        <img class="img-responsive" src="http://placehold.it/80x91" alt="" /> 
        <h1>2</h1> 
        <p>def</p> 
       </div> 
    <!-- 2b --> 

       <div class="col-xs-12 col-md-4 panel2a"> 
        <img class="img-responsive" src="http://placehold.it/80x91" alt="" /> 
        <h1>3</h1> 
        <p>ghi</p> 
       </div> 




       <div class="col-xs-12 col-md-4 panel2b"> 
        <img class="img-responsive" src="http://placehold.it/80x91" alt="" /> 
        <h1>4</h1> 
        <p>jkl</p> 
       </div> 
       <div class="col-xs-12 col-md-4 panel2b"> 
        <img class="img-responsive" src="http://placehold.it/80x91" alt="" /> 
        <h1>5</h1> 
        <p>mno</p> 
       </div> 
       <div class="col-xs-12 col-md-4 panel2b"> 
        <img class="img-responsive" src="http://placehold.it/80x91" alt="" /> 
        <h1>6</h1> 
        <p>pqr</p> 
       </div> 
</div> 


> 




</div> <!-- /container full --> 

     </body> 
    </html>

출처

2014-09-05 Steve Davies

여기 누군가가이 문제를 해결하려고한다면 [** bootply **] (http://www.bootply.com/Hf6lUH2WfN)입니다. –

http://stackoverflow.com/questions/25645881/bootstrap-3-2-vertical-align-image-next-to-text-without-knowing-height/25651881#25651881. 먼저 높이를 높이는 높이가 아니라 부모 높이 (행)를 높이고 블록 요소를 가로로 가운데로 맞 춥니 다 (img-responsive는 무엇인지)하기 때문에 먼저 높이를 지정해야합니다. 이미지의 클래스 "center-block"또는 이미지 응답 클래스에 "여백 : 0 자동"을 씁니다 (그러면 전역이됩니다) – Christina

당신은 당신의 인라인 CSS의 대부분을 제거하고 이미지 컨테이너의 각이 일반적인 개념을 적용받을 수 있습니다

<div class="outer" > 
    <div class="inner"> 
    <img class="img-responsive center-block" src="//placehold.it/200x100" /> 
    <span class="text-center">Description</span> 
    </div> 
</div>

CSS

.outer { 
    display: table; 
    width: 100%; 
} 
.inner { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle; 
}

DEMO : http://www.bootply.com/rE4V28TBqw

출처

2014-09-06 02:53:38

부트 스트랩 3 이미지 센터와 컨텐츠를 수직 중심으로 만들기

답변

관련 문제