How to move the contents of the div to the middle of a carousel image?

Question

How to move the contents of the div to the middle of a carousel image?

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Very good dear friends, I need you to help me that a div that inside takes data put it in an image (carousel item) centered. reference image ...

<div id="owl-demo" class="owl-carousel text-center">
    <?php
    require_once("config.php");
    $posts=$db->query("select * from posts order by id");
    $contador=0;
    if ($filas=$posts->fetch_array())
    {
        do
        {
            $contador++;
        ?>
        <div class="item">
            <img class="lazyOwl" src="images/gallery-<?php echo $contador;?>.jpg" alt="Tout dé Cake">
        <h3><?php echo utf8_encode($filas["plato"]);?></h3>
        <ul class="votos">
            <li class="voting_btn up_button" data-voto="likes" data-id="<?php echo $filas["id"]; ?>"><span><?php echo $filas["likes"]; ?></span></li>
            <li class="voting_btn dw_button" data-voto="hates" data-id="<?php echo $filas["id"]; ?>"><span><?php echo $filas["hates"]; ?></span></li>
        </ul>
        </div>

        <?php
        }
        while($filas=$posts->fetch_array());
    }
    else echo "<h3>No hay entradas disponibles.</h3>";
    ?>
    </div>

jquery html5 php css bootstrap-carousel

asked by Danny HO 28.12.2017 в 23:04

source

2 answers

html How to put double quotes in a url with query How can I reference a segment of Firebase Storage from Android?

score 1 · Answer 1

Good morning.

The whole secret is in CSS. Assuming that your html is something like this:

<div class="soyElFondo">
  <div class="soyElFormulario">
    <fieldset>
      <span>T&iacute;tulo</span><br>
      <ul>
      <li>Contenido</li>
      <li>M&aacute;s contenido</li>
      </ul>
    </fieldset>
  </div>
</div>

Attention to the values in the class attribute, because it depends on them that the CSS properties are applied where they belong, like this:

.soyElFondo {
   background-image: tu_imagen.png /* apuntando a la imagen que deseas */
   width: 800px;
   height: 800px;
   vertical-align: middle;
}

.soyElFormulario {
  width: 300px;
  margin: auto;
  background: rgba(255, 255, 255, 0.7);
  position: relative;
  top: 50%;
}

In this link you can see it working. Greetings ...

... I update my answer, because I did not pay 100% attention to the question (the little great detail of PHP). Put the style attribute background-image by php.

...
<div class="item soyElFondo" style="background-image: images/gallery-<?php echo $contador;?>.jpg">
    <div class="votos soyElFormulario">
        ...
    </div>
</div>

The rest of my proposal is the same, now it is. Another greeting.

score 0 · Answer 2

There are more in Bootstrap than few know. Generally the Bootstrap css steps on any given command from its own style. In the carousel there is an opsion to comment on the images

<div class="item">
<img src="..." alt="...">
<div class="carousel-caption">
<h3>...</h3>
<p>...</p>
</div>
</div>

link

If you want to modify something that already comes from defects, you have to create a style sheet of your own and each option end with ! important .

example:

.margin-top: 10px !important;

I hope I helped you. Greetings!