Bootstrap 3, делающий изображения центрированными, а контент вертикально центрированным

Я изо всех сил пытаюсь выровнять мой центр отзывчивых изображений. Если я не использую тег <img-responsive>, они выравниваются по центру.

Изображения представляют собой серые квадраты-заполнители, я хочу, чтобы они были помещены в центр над текстом, а затем текст И изображения были выровнены по вертикали.

Я использую Bootstrap 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>

image vertical-alignment responsive-design twitter-bootstrap-3 center-align
person Steve Davies    schedule 05.09.2014    source источник
comment
Вот bootply, который я сделал, если кто-то хочет попытаться решить эту проблему   -  person Simple Sandman    schedule 06.09.2014
comment
stackoverflow.com/questions/25645881/. Сначала вам нужно сделать col-* равными высотами, потому что высоты - это только высота содержимого, а не высота родителя (строки), чтобы горизонтально центрировать блочный элемент (что и делает img-responsive), вы можете поместить центральный блок класса на изображении или напишите какое-то поле: 0 auto в классе, реагирующем на изображение (тогда он будет глобальным)   -  person Christina    schedule 06.09.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете избавиться от большей части вашего встроенного 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;
}

ДЕМО: http://www.bootply.com/rE4V28TBqw

person Shawn Taylor    schedule 06.09.2014