Jump to content
Ewfc2005

Alinhar imagens lado a lado

Recommended Posts

Não sei se entendi muito bem o que tu quer, mas eu fiz assim olha:

        <img src="img/img1.png" 
             style="max-width: 20%;">
        <img src="img/img2.png"
             style="max-width: 20%;">
        <img src="img/img3.png"
              style="max-width: 20%;">

 

Como ficou:

ft1.thumb.png.e354b36085c2d48df32219ae004fe308.png

 

Em um dispositivo mobile (resolução de moto g6 play)

ft2.png.b01bf034babc4694c9cef64e1a074be3.png

 

É isso que você quer?

Se for, é só você trabalhar com % no lugar de px.

 

OBS: Se mesmo assim a linha quebrar, você pode tentar isso aqui:

 

        <img src="img/img1.png" 
             style="width: 30%; height: 30%;">
        <img src="img/img2.png"
             style="width: 30%; height: 30%;">
        <img src="img/img3.png"
             style="width: 30%; height: 30%;">

 

Resultado:

1836789439_ft3.thumb.png.b73f1485516fd171680779305bfc52a0.png

 

 

Em um dispositivo mobile:

700983015_ft4.png.7706d8021f894b5f898c124702030aa3.png

Share this post


Link to post
Share on other sites
    <div align="center">

        <img src="img/img1.png" 
            style="max-width: 20%;">
        <img src="img/img2.png"
            style="max-width: 20%;">
        <img src="img/img3.png"
            style="max-width: 20%;">

    </div>

Vê se isso te serve

Share this post


Link to post
Share on other sites

funciounou mais ou menos, porque por exemplo, eu nao consigo deixar ela com uma distancia entre a outra e elas acabam

nao ficando centralizadas.

Share this post


Link to post
Share on other sites

Entendi!

Pra isso tu vai ter que usar margin-left ou margin-right.

 

Exemplo CSS:

    <style>
        .img1{
        margin-left: 0%;
        }
        .img2{
        margin-left: 8%;
        }
        .img3{
        margin-left: 8%;
        }
    </style>

Exemplo HTML:

    <div align="center">
        
        <img class="img1" src="img/img1.png" 
            style="max-width: 20%;">
        <img class="img2" src="img/img2.png"
            style="max-width: 20%;">
        <img class="img3" src="img/img3.png"
            style="max-width: 20%;">

    </div>

 

Resultado:

ft1.thumb.png.80bf02a625636757625168054147f420.png

 

 

No caso, tu vai ter que alternar entre os valores do margin-left, e se for preciso, usar margin-right.

Share this post


Link to post
Share on other sites
31 minutos atrás, Ewfc2005 disse:

Funcionou Direitinho! Obrigado, porem eu nao consigo colocar outras 3 imagens abaixo alinhadas na mesma coluna

 

<br> para quebrar a linha e faz a mesma coisa com os códigos.

 

Exemplo:

 

    <div align="center">
        
        <img class="img1" src="img/img1.png" 
            style="max-width: 20%;">
        <img class="img2" src="img/img2.png"
            style="max-width: 20%;">
        <img class="img3" src="img/img3.png"
            style="max-width: 20%;">

		<br>
	
        <img class="img4" src="img/img4.png" 
            style="max-width: 20%;">
        <img class="img5" src="img/img5.png"
            style="max-width: 20%;">
        <img class="img6" src="img/img6.png"
            style="max-width: 20%;">
    </div>
    <style>
        .img1{
        margin-left: 0%;
        }
        .img2{
        margin-left: 8%;
        }
        .img3{
        margin-left: 8%;
        }
		.img4{
        margin-left: 0%;
        }
        .img5{
        margin-left: 8%;
        }
        .img6{
        margin-left: 8%;
        }
    </style>

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By adriano.eurich
      Tem como recuperar os dados do banco que foram incluídos através do create, e retornar para a mesmo formulário?
      Quando eu inserir o numero da chave e clicar em pesquisar ele traz o resultado do banco referente aquela chave se ela estiver com a situação 1 que é emprestado ai habilitaria os botões editar e deletar, onde o deletar apenas alterava o situação de 1 para 2 .
      Não consigo fazer essa parte de busca no banco e retornar no mesmo formulário, se é que é possível!
       
      cadastro.php
       
      <?php session_start(); include_once 'includes/header.inc.php'; include_once 'includes/menu.inc.php'; ?> <!-- Formulário de Cadastro Cliente --> <div class="row container"> <form action="banco_de_dados/create.php" method="post" class="col s12"> <fieldset class="formulario" style="padding: 1px;"> <legend><!--<img src="imagens/CadCli.png" alt="[imagem]" style="width:40x; height:40px">--></legend> <br> <?php if (isset($_SESSION['msg'])): echo $_SESSION['msg']; session_unset(); endif; ?> <!-- Campo Chave --> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input type="text" name="chave" id="chave" maxlength="4" required> <label for="chave">Chave</label> </div> <!-- Campo Nome --> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input type="text" name="nome" id="nome" maxlength="40" required autofocus> <label for="nome">Nome</label> </div> <!-- Campo Instituição --> <div class="input-field col s12"> <i class="material-icons prefix">account_balance</i> <input type="text" name="inst" id="inst" maxlength="40" required autofocus> <label for="inst">Instituição</label> </div> <!-- Campo Telefone --> <div class="input-field col s12"> <i class="material-icons prefix">phone</i> <input type="text" name="telefone" id="telefone" maxlength="13" required> <label for="telefone">Telefone</label> </div> <!-- Botões --> <div class="input-field col s12"> <input type="submit"style="width:108px; height:35px" value="cadastrar" class="btn green"> <input type="submit"style="width:108px; height:35px" value="Pesquisar" class="btn blue"> <input type="submit"style="width:108px; height:35px" value="Editar" class="btn orange"> <input type="submit"style="width:108px; height:35px" value="Devolver" class="btn red"> </div> </fieldset> </form> </div> <?php include_once 'includes/footer.inc.php'; ?> <?php include_once 'includes/script.inc.php'; ?>  
      create.php
       
      <?php session_start(); include_once 'conexao.php'; $id = $_POST ['id']; $nome = $_POST ['nome']; $inst = $_POST ['inst']; $data = date('y-m-d'); $telefone = $_POST ['telefone']; $chave = $_POST ['chave']; $situacao = $_POST ['situacao']; $queryInsert = $link->query("insert into tb_cadastro VALUES ('" . $id . "', '" . $nome . "','" . $inst . "','" . $data . "','" . $telefone . "','" . $chave . "','1')"); $affected_rows = mysqli_affected_rows($link); if ($affected_rows > 0): $_SESSION['msg'] = "<p class='center green-text'>" . 'Cadastrado com Sucesso!' . "<br>"; header("Location: ../cadastro.php"); endif;  
       
       
       
       

    • By frlopes
      Boa tarde, pessoal... 
       
      Tenho o código abaixo e gostaria de saber como faço para alinhar o botão e o título "Login do Sistema" da mesma forma que estão alinhados os inputs...
      Tentei colocar style="align-items:center" em tudo, rsrsrs e não alinhou.
      Se alguém puder me ajudar, agradeço.
       
      <div class="container"> <div class="form-login"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">Login do Sistema</div> </div> <div style="padding-top:30px" class="panel-body"> <div style="display:none" id="result" class="alert alert-danger col-sm-12"></div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "E-mail", autofocus = true } }) @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" }) </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> @Html.EditorFor(model => model.SENHA, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "Senha" } }) @Html.ValidationMessageFor(model => model.SENHA, "", new { @class = "text-danger" }) </div> <div style="margin-top:10px; align-items:center" class="form-group"> <div class="col-sm-12 controls" style="align-items:center"> <input type="submit" value="Acessar" style="align-items:center" class="btn primary btn-lg" /> </div> </div> </div> </div> </div> </div>  
      Resultado abaixo:
       

       
       
       
       
       
       
    • By frlopes
      Boa tarde, pessoal... 
       
      Tenho o código abaixo e gostaria de saber como faço para alinhar o botão e o título "Login do Sistema" da mesma forma que estão alinhados os inputs...
      Tentei colocar style="align-items:center" em tudo, rsrsrs e não alinhou.
      Se alguém puder me ajudar, agradeço.
       
      <div class="container"> <div class="form-login"> <div class="panel panel-default"> <div class="panel-heading"> <div class="panel-title">Login do Sistema</div> </div> <div style="padding-top:30px" class="panel-body"> <div style="display:none" id="result" class="alert alert-danger col-sm-12"></div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-user"></i> </span> @Html.EditorFor(model => model.EMAIL, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "E-mail", autofocus = true } }) @Html.ValidationMessageFor(model => model.EMAIL, "", new { @class = "text-danger" }) </div> <div style="margin-bottom: 25px" class="input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"></i> </span> @Html.EditorFor(model => model.SENHA, new { htmlAttributes = new { @class = "form-control input-lg", placeholder = "Senha" } }) @Html.ValidationMessageFor(model => model.SENHA, "", new { @class = "text-danger" }) </div> <div style="margin-top:10px; align-items:center" class="form-group"> <div class="col-sm-12 controls" style="align-items:center"> <input type="submit" value="Acessar" style="align-items:center" class="btn primary btn-lg" /> </div> </div> </div> </div> </div> </div>  
      Resultado abaixo:
       

       
       
       
       
       
       
    • By Licht
      Quero um programa que leia vários numeros e informa quantos pares foram digitados. Quando o número 0 (zero) for digitado ele para a execucao. O programa entra num loop e nao funciona como gostaria <?php             $cont= 0;             do {                 echo "<form method='GET' action='exemplo.php'><br/>";                 echo "<h1>Quantidade de numeros pares</h1><br/>";                 echo "<label for='num'>Numero: </label><br/>";                 echo "<input type='number' name='num'/><br/><br/>";                 echo "<input type='submit' value='Verificar'>";                 echo "</form>";                 echo "Contador: $cont";                 $num_verificar = isset($_GET["num"]) ? $_GET["num"] : ' ';                 if($num_verificar%2 == 0)                     $cont ++;             } while ($num_verificar != 0);             echo "Quantidade de numeros pares eh $cont! <br/>"; ?>             
    • By tatiana schyneider
      Ola pessoal,
      Estou desenvolvendo um form de pesquisa simples(com um campo somente).
      No caso, esta pesquisa retornaria o nome  da cidade , mas com opcoes da pessoa  escolher alguns dados do seu perfil(nao precisa gravar nada no banco) é só demonstrativo


      Voces tem alguma ideia disso?
       
      Obrigada
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.