CODEWITHSUNDEEP
csstwitter-bootstrap
Fin del Mundo
Fin del Mundo

Reputation: 156

bootstrap carousel issues

i need to align-center the images and the caption of the bootstrap carrousel

i use php code tho show random images from dataase

here is the i use to keep aspect ratio:

<div class="item">';
        while ($resultados = $arte->fetch_assoc()) {
            $title = utf8_encode($resultados['titulo']);
          $id = $resultados['medidas'];
          $tec = utf8_encode($resultados['tecnica']);
          $img = $resultados['imagen'];
          $home .= '  <img src="'.$img.'" style="background-size: cover;background-size: cover;width: auto;height: auto;min-width: 1%;max-height: 600px;max-width: 1000px;">
          <div class="container">
            <div class="carousel-caption">
              <h1>'.$title.'.</h1>
              <p class="lead">'.$id.'<br> '.$tec.'</p>
              <a class="btn btn-large btn-inverse" href="/arte_objeto">Ver m&aacute;s</a>
            </div>
         </div>';
            }
        $home .= '</div>

this is the result:

http://prntscr.com/64h3vb

so align the caption too so it shows the image in the center of the carousel

i tried with:

background-position: center center;

but doesnt work

Upvotes: 0

Views: 60

Answers (2)

Fin del Mundo
Fin del Mundo

Reputation: 156

the problem was position:absolute; on .carousel img { so i removed it and also added margin: 0 auto; to .carousel img {

Upvotes: 0

David North
David North

Reputation: 447

Use margin:0 auto; on the div's/images you'd like to center.

Use your "inspect element" to find the div's that are pulling to the left and then apply that css.

Upvotes: 1

Related Questions