Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Yuka007

Tentando centralizar um div

Recommended Posts

Estou tentando centralizar um div, dentro dele tem 5 imagens e quero deixar essas imagens centralizadas em meu site.

Vou deixar o código aqui, por favor me ajudem ^^

<div class="diywebContent">
		<div class="diywebLiveArea">
			<div class="diywebMainGutter">
				<div class="diyfeGridGroup diyfeCA diyfeCA1">
					<div class="diywebMain diyfeGE" />
					
						<div class="diywebGutter" />
							
        <div id="content_area" />
        	<div id="content_start"></div>
        	
        
        <div id="matrix_1279667" class="sortable-matrix" data-matrixId="1279667"><div class="n module-type-matrix diyfeLiveArea "> 

<div class="diyfeModGridGroup diyfeModGrid5">
            <div class="diyfeModGridElement diyfeModGridCol20">
            <div class="diyfeModGridContent">
                <div id="matrix_1284492" class="sortable-matrix-child" data-matrixId="1284492"><div class="n module-type-imageSubtitle diyfeLiveArea "> <div class="clearover imageSubtitle imageFitWidth" id="imageSubtitle-11897710">
    <div class="align-container align-center" style="max-width: 93px">
        <a class="imagewrapper" href="servidores/index.html">
            <img id="image_14772012" src="s/cc_images/cache_14772012e6a3.png?t=1479575219" alt="" style="max-width: 93px; height:auto"/>
        </a>

        
    </div>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
    var $target = $('#imageSubtitle-11897710');

    if ($.fn.swipebox && Modernizr.touch) {
        $target
            .find('a[rel*="lightbox"]')
            .addClass('swipebox')
            .swipebox();
    } else {
        $target.tinyLightbox({
            item: 'a[rel*="lightbox"]',
            cycle: false,
            hideNavigation: true
        });
    }
});
//]]>
</script>
 </div><div class="n module-type-hr diyfeLiveArea "> <div style="padding: 0px 0px">
    <div class="hr"></div>
</div>
 </div></div>            </div>
        </div>
            <div class="diyfeModGridElement diyfeModGridCol20">
            <div class="diyfeModGridContent">
                <div id="matrix_1284493" class="sortable-matrix-child" data-matrixId="1284493"><div class="n module-type-imageSubtitle diyfeLiveArea "> <div class="clearover imageSubtitle imageFitWidth" id="imageSubtitle-11897714">
    <div class="align-container align-center" style="max-width: 93px">
        <a class="imagewrapper" href="index.html">
            <img id="image_14772013" src="s/cc_images/cache_14772013ed13.png?t=1477674761" alt="" style="max-width: 93px; height:auto"/>
        </a>

        
    </div>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
    var $target = $('#imageSubtitle-11897714');

    if ($.fn.swipebox && Modernizr.touch) {
        $target
            .find('a[rel*="lightbox"]')
            .addClass('swipebox')
            .swipebox();
    } else {
        $target.tinyLightbox({
            item: 'a[rel*="lightbox"]',
            cycle: false,
            hideNavigation: true
        });
    }
});
//]]>
</script>
 </div><div class="n module-type-hr diyfeLiveArea "> <div style="padding: 0px 0px">
    <div class="hr"></div>
</div>
 </div></div>            </div>
        </div>
            <div class="diyfeModGridElement diyfeModGridCol20">
            <div class="diyfeModGridContent">
                <div id="matrix_1284494" class="sortable-matrix-child" data-matrixId="1284494"><div class="n module-type-imageSubtitle diyfeLiveArea "> <div class="clearover imageSubtitle imageFitWidth" id="imageSubtitle-11897718">
    <div class="align-container align-center" style="max-width: 93px">
        <a class="imagewrapper" href="vip/index.html">
            <img id="image_14772014" src="s/cc_images/cache_147720146a9f.png?t=1479575209" alt="" style="max-width: 93px; height:auto"/>
        </a>

        
    </div>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
    var $target = $('#imageSubtitle-11897718');

    if ($.fn.swipebox && Modernizr.touch) {
        $target
            .find('a[rel*="lightbox"]')
            .addClass('swipebox')
            .swipebox();
    } else {
        $target.tinyLightbox({
            item: 'a[rel*="lightbox"]',
            cycle: false,
            hideNavigation: true
        });
    }
});
//]]>
</script>
 </div><div class="n module-type-hr diyfeLiveArea "> <div style="padding: 0px 0px">
    <div class="hr"></div>
</div>
 </div></div>            </div>
        </div>
            <div class="diyfeModGridElement diyfeModGridCol20">
            <div class="diyfeModGridContent">
                <div id="matrix_1284495" class="sortable-matrix-child" data-matrixId="1284495"><div class="n module-type-imageSubtitle diyfeLiveArea "> <div class="clearover imageSubtitle imageFitWidth" id="imageSubtitle-11897722">
    <div class="align-container align-center" style="max-width: 93px">
        <a class="imagewrapper" href="vip/doador/index.html">
            <img id="image_14772015" src="s/cc_images/cache_1477201510fb.png?t=1479575201" alt="" style="max-width: 93px; height:auto"/>
        </a>

        
    </div>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
    var $target = $('#imageSubtitle-11897722');

    if ($.fn.swipebox && Modernizr.touch) {
        $target
            .find('a[rel*="lightbox"]')
            .addClass('swipebox')
            .swipebox();
    } else {
        $target.tinyLightbox({
            item: 'a[rel*="lightbox"]',
            cycle: false,
            hideNavigation: true
        });
    }
});
//]]>
</script>
 </div><div class="n module-type-hr diyfeLiveArea "> <div style="padding: 0px 0px">
    <div class="hr"></div>
</div>
 </div></div>            </div>
        </div>
            <div class="diyfeModGridElement diyfeModGridCol20">
            <div class="diyfeModGridContent">
                <div id="matrix_1284496" class="sortable-matrix-child" data-matrixId="1284496"><div class="n module-type-imageSubtitle diyfeLiveArea "> <div class="clearover imageSubtitle imageFitWidth" id="imageSubtitle-11897726">
    <div class="align-container align-center" style="max-width: 93px">
        <a class="imagewrapper" href="vote/index.html">
            <img id="image_14772016" src="s/cc_images/cache_14772016cf8f.png?t=1477674930" alt="" style="max-width: 93px; height:auto"/>
        </a>

        
    </div>

</div>

<script type="text/javascript">
//<![CDATA[
jQuery(function($) {
    var $target = $('#imageSubtitle-11897726');

    if ($.fn.swipebox && Modernizr.touch) {
        $target
            .find('a[rel*="lightbox"]')
            .addClass('swipebox')
            .swipebox();
    } else {
        $target.tinyLightbox({
            item: 'a[rel*="lightbox"]',
            cycle: false,
            hideNavigation: true
        });
    }
});
//]]>
</script>
 </div><div class="n module-type-hr diyfeLiveArea "> <div style="padding: 0px 0px">
    <div class="hr"></div>
</div>
 </div></div>            </div>
        </div>
        <div style="clear: both;"></div>
</div>
 </div><div class="n module-type-htmlCode diyfeLiveArea ">  </div></div>
        
        
        </div>
        
						</div>
					</div>
					<div class="diywebSecondary diyfeCA diyfeCA3 diyfeGE">
						<div class="diywebNav diywebNav23">
							<div class="diywebGutter">
								<div class="webnavigation"></div>
							</div>
						</div>
						
						
						
						<div class="diywebSidebar diyfeCA3"> </div><!-- .diywebSidebar -->
					</div><!-- .diywebSecondary -->
				</div>

Compartilhar este post


Link para o post
Compartilhar em outros sites

  • Conteúdo Similar

    • Por Alessandro Bodão
      Fala galerinha, 
       
      Tenho um container com um título (h1) no cabeçalho do meu site, esse container ocupa metade da tela (50vw), e eu gostaria que esse título ocupasse toda a largura desse container, independente do seu tamanho ou do tamanho do monitor, de forma com que a palavra tenha exactamente o mesmo tamanho do container (vou anexar uma foto de exemplo). Já tentei todos os valores pra essa h1, como % e vw... mas nada parece fazer sentido.
       
       

    • Por Giovanird
      Olá a todos!
      tenho varias divs com o mesmo ID e nome de classe. Preciso que a cor da div seja conforme uma escala de valores.
      Estou tentando pegar o valor pelo nome da classe, pois as divs possuem o mesmo id e não tive sucesso. Segue script:
      <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="29">29</div> <div class="planos" id="1" value="55">55</div> <div class="planos" id="1" value="74">74</div> <div class="planos" id="1" value="63">63</div> <div class="planos" id="1" value="55">55</div> <script type="text/javascript"> var valueElement = document.getElementsByClassName('.planos').getAttribute('value'); console.log(valueElement); if (valueElement >= "70") { document.getElementsByClassName('.planos').style.backgroundColor == '#4caf50'; } else if (valueElement >= "50" && valueElement <= "69") { document.getElementsByClassName('.planos').style.backgroundColor == '#ffbc00'; } else { document.getElementsByClassName('.planos').style.backgroundColor == '#f44336'; } </script>  
       
    • Por GOD
      Quero um código div ou qualquer outra forma, para atingi esse resultado do link
       https://drive.google.com/file/d/0B8Ssi9zuKdQWMExWeVpGUXN0MlRsUzdmdGRuTFl2eU1yejB3/viewocal
       
      Para ficar nesse local.
      https://drive.google.com/file/d/0B8Ssi9zuKdQWeGZSSnVBaFBxM1FUN1hEeWdrRzhTNWI0Q01Z/view
       
      Meu objetivo é que em cada quadro da div, fique uma noticia de um site especifico, que pretendo colocar através de plugin rss.
       
       
      Enfim espero uma ajuda sobre como posso fazer isso
       
       
    • Por TkCode
      Estou tentando desenvolver um código para calcular o valor final de custas de imoveis.
      Exemplo: Entro com um valor de R$50.000,00. Tem o ITBI que é 2% sob os R$50.000,00 + o valor de custas que é o valor de uma tabela (essa tabela tem valores que de R$0,01 até R$17.800,90 é uma valor, e assim sucessivamente)
       
      Então teria que calcular os 2% (do valor informado) + o valor da tabela, dando um resultado final com o valor total (2%+ValorTabela).
       
      Alguem teria como me dar uma dica de como resolver isso?
      Desde já agradeço!
    • Por rcsbnu27
      Estou tentando ajudar um amigo a desenvolver seu site pessoal ele me passou um modelo, onde não estou conseguindo fazer um link de menu quando clicar nos anos iniciais ir para as turmas dos anos iniciais no menu atividade educacionais, segue em anexo o código. Endereço para ter ideia do que estou falando: https://www.profrodrigo.com/temporario/index.html. Nesta parte:
      HTML
      <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#anosiniciais" > <img src="images/anos/anosiniciais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#anosfinais" > <img src="images/anos/anosfinais.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div> </div> </div> <div class="section news-section" id="anosiniciais"> <div class="container"> <div class="row"> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/pres.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#" target="_blank"> <img src="images/turmas/1sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/2sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/3sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> <div class="col-sm-2"> <a href="#"> <img src="images/turmas/4sanos.png" class="img-responsive" width="190" height="190" alt=""> </a> </div> </div> </div> </div>

      <div class="section news-section" id="anosfinais">
      <div class="container">
      <div class="row">
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/5sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.ebmalbertostein.com" target="_blank">
      <img src="images/turmas/6sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="https://www.profgarrido.com" target="_blank">
      <img src="images/turmas/7sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/8sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      <div class="col-sm-2">
      <a href="#">
      <img src="images/turmas/9sanos.png" class="img-responsive" width="190" height="190" alt="">
      </a>
      </div>
      </div>
      </div>
      </div>
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.