Центрировать заголовок под изображением в столбце начальной загрузки

Я использую CSS для размера и центрирования изображений в начальной загрузке col-md-4, и все центрируется нормально, кроме фактического контейнера подписи. Я использовал text-align, который выравнивал текст по центру, но не мог понять, как выровнять весь заголовок по центру. Нужно ли мне вычислять пиксели и оставлять поля? Спасибо за любую помощь, я уверен, что это легко! http://http://codepen.io/chiggory/pen/xOZXQB

 <div class="container">
     <div class="row">
         <div class="col-md-4 border"><a href="#"><img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"></a>

<div class="caption">Test</div>
     </div>
 </div>

.size {
  height: 230px;
  width: 230px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border:5px solid #800000;
}

 .caption {
    font-size: 20px;
    color: white; 
    text-align: center;
    background-color: #800000;
    width: 230px;
}

image css twitter-bootstrap caption
person Erich Sterzing    schedule 19.08.2016    source источник

Ответы (4)


arrow_upward
4
arrow_downward

Используйте класс Bootstrap center-block.

<div class="caption center-block">Test</div>

http://codeply.com/go/UD1wOD7iLW

person Zim    schedule 19.08.2016

arrow_upward
2
arrow_downward

Иногда вам понадобится класс Bootstrap text-center:

<div class="caption text-center">Text here</div>
person SwngStack    schedule 10.04.2018

arrow_upward
0
arrow_downward

Просто добавьте margin-left: auto; margin-right: auto; к подписи, как на картинке.

.size {
  height: 230px;
  width: 230px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border:5px solid #800000;
}

 .caption {
    font-size: 20px;
    color: white; 
    text-align: center;
    background-color: #800000;
    width: 230px;
   
    margin-left: auto;
    margin-right: auto;
}
 <div class="container">
     <div class="row">
         <div class="col-md-4 border"><a href="#"><img class="img-responsive      size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg"></a>

<div class="caption">Test</div>
     </div>
 </div>

Чтобы сделать их одинакового размера, вам нужно либо добавить ту же рамку, что и на изображении, к подписи, либо добавить box-sizing: border-box к изображению.

person Kevin Jantzer    schedule 19.08.2016
comment
Это имеет смысл, просто по какой-то причине я не думал о них одинаково. Спасибо. - person Erich Sterzing; 20.08.2016

arrow_upward
0
arrow_downward

Center a caption under an image in bootstrap column

сокращение стихов

.size{height:auto;width:100%;display:block;margin-left:auto;margin-right:auto;border:5px solid maroon;box-sizing:border-box}.caption{font-size:20px;color:#fff;background-color:maroon;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center}.display-container{position:relative;height:230px;width:230px;//float:left;//display:block}
<div class="container"><div class="row"><div class="col-md-4 border display-container"> <a href="#"> <img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" /> </a><div class="caption center-block">Test</div></div></div></div>

person antelove    schedule 27.09.2017