상대 부모 컨테이너 내에 절대 버튼을 중앙에 배치하는 적절한 방법

Question

나는 원하는 결과를 얻었습니다. 그러나 올바른 방법은 아닙니다. 예를 들어 부모 컨테이너가 너비를 변경하면이 해킹이 작동하지 않습니다. 그러나 브라우저에서 올바른 방법을 시도하고 해결하기 위해 화면에 표시하기 위해이 작업을 수행했습니다.

See screenshot here

HTML 내 엉뚱한 간격에 대한

<div class="container"> 
       <div class="row"> 
        <div class="col-md-4"> 
         <div class="product-wrapper"> 
          <div class="product-card"> 
           <a href="lathes-single.html" class="product-img-wrapper"><img src="../assets/img/46-455.jpg" alt=""></a> 
           <h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4> 
           <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> 
           <a href="lathes-single.html" class="btn btn-lg btn-primary">View Product</a> 
          </div> 
         </div> 
        </div> 
       </div> 
</div> 

죄송합니다. Sublime Text 3을 붙여 넣는 몇 가지 이유 때문에 여기에 모든 것이 다 들어 있습니다. 대신 .btn에이

관련 CSS

.product-img-wrapper { 
    text-align: center; 
} 

.product-img-wrapper img { 
    width: 200px; 
    height: 200px; 
} 

.product-wrapper { 
    position: relative; 
    margin: 50px 0; 
} 

.product-card { 
    position: relative; 
    max-width: 330px; 
    height: 450px; 
    border: 1px solid #eee; 
    margin: 25px auto 0 auto; 
    text-align: center; 
    padding-left: 20px; 
    padding-right: 20px; 
    box-shadow: 7px 7px 5px #838485; 
} 

.product-card .btn { 
    position: absolute; 
    min-width: 200px; 
    bottom: 15px; 
    left: 60px; 
} 

Answer 1

내 의견에, 버튼에 대한 래퍼를하고 position:absolute; 하단에 상기한다. 그러면 래퍼에 text-align:center;이 있기 때문에 버튼에서 스타일을 제거하면 스타일 자체가 중앙에 위치합니다.

.product-img-wrapper { 
 
    text-align: center; 
 
} 
 

 
.product-img-wrapper img { 
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.product-wrapper { 
 
    position: relative; 
 
    margin: 50px 0; 
 
} 
 

 
.product-card { 
 
    position: relative; 
 
    max-width: 330px; 
 
    height: 450px; 
 
    border: 1px solid #eee; 
 
    margin: 25px auto 0 auto; 
 
    text-align: center; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    box-shadow: 7px 7px 5px #838485; 
 
} 
 

 
.product-card .card-bottom { 
 
    position: absolute; 
 
    bottom: 15px; 
 
    width:100%; 
 
    left:0; 
 
}

<div class="container"> 
 
       <div class="row"> 
 
        <div class="col-md-4"> 
 
         <div class="product-wrapper"> 
 
          <div class="product-card"> 
 
           <a href="lathes-single.html" class="product-img-wrapper"><img src="../assets/img/46-455.jpg" alt=""></a> 
 
           <h4> 46-460 12 1/2 in. Variable Speed MIDI-LATHE® </h4> 
 
           <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</p> 
 
           <div class="card-bottom"><a href="lathes-single.html" class="btn btn-lg btn-primary">View Product</a></div> 
 
          </div> 
 
         </div> 
 
        </div> 
 
       </div> 
 
</div>

Answer 2

사용. 이것은 당신의 btn 센터를 수평하게 만들 것입니다. css3: translateX to center element horizontally는 :

left: 50%; 
-webkit-transform: translateX(-50%); 
-moz-transform: translateX(-50%); 
transform: translateX(-50%);