Actually i need to put a image in a static position in a div like the next photo

I need to put the image in the top of the line red statically for every image my code is this

<div class="col-md-4 col-xl-4 col-xs-4 col-sm-4 col-lg-4">
                                        <div class="contenedor">

                                            <center>
                                                <h3>Helado de copoazú </h3>
                                            </center>
                                            <br />
                                            <figure>
                                                <img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"
                                                    style="width: 100%;border-radius: 8px;" product_id='45' onmousemove="deshabilitar()"/>
                                                <div class="centrado2" name="disponible_helado" id="agotado_45"></div>
                                            </figure>
                                            <center>
                                                <div id="adiciona45_mostrar" style="font-weight:bold; font-size: 22px;">
                                                    Bs.
                                                    10
                                                </div>
                                                <button id="stepDown-helado" type="button" style="border-radius: 15px;"
                                                    class=" btn btn-success"
                                                    onclick="cambiar_inputs();" product_id='45'>-</button>
                                                <input type="number" name="numero_helado" id="numero_helado" value="0"
                                                    min="0" readonly="1" size="3"
                                                    style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
                                                <button id="stepUp-helado" type="button" style="border-radius: 15px;"
                                                    class=" btn btn-primary"
                                                    onclick="cambiar_inputs();" product_id='45'> </button>
                                            </center>
                                        </div>
                                        <hr style="border: 5px solid #1db33b; width:100%" />
                                    </div> 

CodePudding user response：

try this :

add display : inline-block to img tag

and then add margin-top : 20px or whatever you want

CodePudding user response：

You should build your content as a table.

Basically like this:

<table>
    <tr>
      <th>Yuca Frita</th>
      <th>Helado de copoazú </th>
    </tr>
    <tr>
      <td><img src="Image for Yuca Frita"</td>
      <td><img src="/as_website_sale_onepage/static/img/helado_copoazu.jpeg"</td>
    </tr>
    <tr>
      <td>Bs.7</td>
      <td>Bs.10</td>
    </tr>
    <tr>
      <td><button id="stepDown-helado" type="button" style="border-radius: 15px;"
        class=" btn btn-success"
        onclick="cambiar_inputs();" product_id='45'>-</button>
    <input type="number" name="numero_helado" id="numero_helado" value="0"
        min="0" readonly="1" size="3"
        style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
    <button id="stepUp-helado" type="button" style="border-radius: 15px;"
        class=" btn btn-primary"
        onclick="cambiar_inputs();" product_id='45'> </button></td>
      <td><button id="stepDown-helado" type="button" style="border-radius: 15px;"
        class=" btn btn-success"
        onclick="cambiar_inputs();" product_id='45'>-</button>
    <input type="number" name="numero_helado" id="numero_helado" value="0"
        min="0" readonly="1" size="3"
        style="text-align: center;width:50px !important; border: 1px solid #97CCF3; color: #099EFB; font-weight: bold;border-radius: 15px;" />
    <button id="stepUp-helado" type="button" style="border-radius: 15px;"
        class=" btn btn-primary"
        onclick="cambiar_inputs();" product_id='45'> </button></td>
    </tr>
  </table>