Jump to content

Search the Community

Showing results for tags 'centralizar'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Calendars

  • Comunidade iMasters

Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Web Development
    • HTML e CSS
    • Javascript
    • PHP
    • Ruby
    • Python
    • Java
    • .NET
    • Docker, Kubernets and other environments
    • WordPress
    • Mobile
    • Agile
    • Desenvolvimento de Games
    • Banco de Dados
    • Design and UX
    • Algoritmos & Outras Tecnologias
  • Entretenimento e uso pessoal
    • Segurança & Malwares
    • Geral
    • iMasters's pub

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Found 7 results

  1. Olá, estou com uma dificuldade para posicionar um elemento. Se trata de um pop-up que aparece na tela ao clicar. Acontece que esse pop-up não fica centralizado em todas as telas dependendo da resolução. No momento estou usando o position absolute, a div é essa abaixo: .form-structor { background-color: #222; border-radius: 15px; height: 550px; width: 450px; position: absolute; top: -100px; left: 170px; overflow: hidden; } Também já tentei: {position: relative; top: 50%; left: 50%;} Alguém pode me ajudar? Qual propriedade eu utilizo para ficar centralizado tanto horizontal e quanto vertical em qualquer resolução?
  2. higordiasz

    Centrralizar e Alinhar DIVS

    Boa Tarde, Estou tendo problemas em conseguir colocar as div lado a lado alinhadas corretamente .. casso possam me ajudar ficaria grato. Segue meu código CSS responsável pelas div. .col-100 { width: 100%; float: left; position: relative; } .principal-text { background-color: #424242; } .ul-softwares { list-style-type: none; display: inline-block; height: 350; width: 90%; float: left; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-bancodedados { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-mobile { list-style-type: none; display: inline-block; height: 350; width: 90%; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .ul-redeestruturada { list-style-type: none; display: inline-block; height: 350; width: 90%; float: right; border: 2px solid #656565; border-radius: 15px; background-color: #373737; margin: 0 auto; } .principal-text ul li { margin: auto; text-align: center; } .uls-principal { text-align: center; } .li-img { padding-top: 6px; } .uls-principal div { display: inline-block; width: 180; padding-right: 20px; } Abaixo meu código HTML: <div class="col-100 principal-text"> <main class="uls-principal"> <div class="div-prog"> <ul class="ul-softwares"> <li class="li-img"><img src="./img/programacao.png"></li> <li> <h1>Softwares</h1> </li> <li> <p>Possuimos diversos Softwares para a sua empresa.</p> </li> <li></li> </ul> </div> <div class="div-bd"> <ul class="ul-bancodedados"> <li class="li-img"><img src="./img/bancodedados.png"></li> <li> <h1>Banco de Dados</h1> </li> <li> <p>Organimazanos todos seus dados e configuramos oque precisa.</p> </li> <li></li> </ul> </div> <div class="div-mobile"> <ul class="ul-mobile"> <li class="li-img"><img src="./img/mobile.png"></li> <li> <h1>Desenvol. Mobile</h1> </li> <li> <p>Fazemos o aplicativo ideal para a sua Empresa.</p> </li> <li></li> </ul> </div> <div class="div-rede"> <ul class="ul-redeestruturada"> <li class="li-img"><img src="./img/rede.png"></li> <li> <h1>Estrutura de Rede</h1> </li> <li> <p>Fazemos toda o mapiamento da rede e implantação.</p> </li> <li></li> </ul> </div> </main> </div> Print das DIV: Alguem sabe oq posso alterar para alinhar elas corretamente ?
  3. Boa noite.Estou montando um layout de 3 colunas, no qual as colunas esquerda e direita devem ter larguras fixas de 300px e a coluna central se ajustar no que sobra. Quanto ao layout está tudo OK, exatamente como preciso. Porém, no interior da DIV central, coloquei uma IMG, a qual quero que sempre ocupe 100% da altura dessa DIV e que ela fique centralizada no horizontal, não importando se a largura da DIV na qual esta IMG está contida tenha largura maior ou menor do que a largura da própria IMG. Quanto a ocupar 100% da altura está OK, não importa o como eu redimensione a janela do browser ela está se auto-ajustando como desejado. Porém, ela não está ficando centralizada na horizontal, como é o objetivo. Ela está ficando sempre alinhada à esquerda, exceto quando a largura da DIV é maior que a largura da IMG, aí neste caso sim a IMG está ficando perfeitamente centralizada da DIV contêiner, como é o objetivo. Agora, quando a largura da DIV é menor do que a largura da IMG, a IMG está ficando alinhada à esquerda, cortando partes da imagem somente no seu lado direito.Estou fazendo os testes em um desktop com resolução de 1920x1080 e a imagem que estou usando na IMG tem 1680x945px.Seguem os códigos HTML e CSS: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!doctype html> <html lang="pt-br"> <head> <link type="text/css" rel="stylesheet" href="code/css/estudo.css"> </head> <body> <div id="main"> <div id="viewport_left" class="viewports"> </div> <div id="viewport_center" class="viewports"> <img id="imagem_teste" src="imagem_teste_01.jpg"> </div> <div id="viewport_right"> </div> </div> <div id="footer"> </div> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 * { margin: 0; padding: 0; text-align: center; overflow: hidden; } #main { width: 100%; margin: 0; } #viewport_left { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; left: 0; top: 0; } #viewport_center { min-height: calc(100vh - 25px); width: calc(100vw - 650px); margin-bottom: 25px; border-left: 1px solid #FFFFFF; border-right: 1px solid #FFFFFF; background-color: red; position: absolute; left: 50%; top: 50%; margin-left: calc(((100vw - 648px) / 2)* -1); margin-top: calc((100vh / 2)* -1); display: table; overflow: hidden; } #imagem_teste { max-height: calc(100vh - 25px); position: absolute; width: auto; height: auto; } #viewport_right { min-height: calc(100vh - 25px); margin-bottom: 25px; width: 324px; background-color: #333333; position: fixed; right: 0; top: 0; } #footer { position: fixed; bottom: 0; left: 0; height: 24px; width: 100%; background-color: #333333; border-top: 1px solid #FFFFFF; text-align: center; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #FFFFFF; } Alguém sabe como posso corrigir este problema?Desde já agradeço a toda e qualquer ajuda e colaboração.Grato, Evair Peterson.
  4. Olá, estou desenvolvendo um site onde não posso editar o HTML dos menus, então estou trabalhando de uma forma mais "gambiarra". O Menu possui botões que são palavras "únicas" e outros botões onde há "duas linhas de palavras". Porém não consigo centralizar verticalmente os dois. Assim, por exemplo ------=====------- HTML (Não posso alterar nada, apenas acrescentar mais botões) <nav class="menu_component" id="component_37548"> <menu class="dropdown"> <li id="menu_item_39037" class="sub"> <a alt="O SIENPRO" title="" target="" class="empty-href"> O SIENPRO </a> <menu class="submenu"> <li id="menu_item_41614" class=""> <a alt="SOBRE" title="" target="" class="" href="/p/21374-sobre-o-sienpro"> SOBRE </a> </li> <li id="menu_item_39038" class=""> <a alt="COMIT&Ecirc;" title="" target="" class="" href="/p/23834-comite-2018"> COMIT&Ecirc; </a> </li> </menu> </li> <li id="menu_item_41615" class=""> <a alt="TEMA" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#tema"> TEMA </a> </li> <li id="menu_item_41616" class=""> <a alt="PRINCIPAIS DATAS" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#datas"> PRINCIPAIS DATAS </a> </li> <li id="menu_item_39040" class="sub"> <a alt="EDI&Ccedil;&Otilde;ES SIENPRO" title="" target="" class="empty-href"> EDI&Ccedil;&Otilde;ES SIENPRO </a> <menu class="submenu"> <li id="menu_item_41593" class=""> <a alt="I SIENPRO - 2017" title="" target="" class="" href="/p/23811-i-sienpro-2017"> I SIENPRO - 2017 </a> </li> <li id="menu_item_41605" class=""> <a alt="II SIENPRO - 2018" title="" target="" class="" href="/p/23814-ii-sienpro-2018"> II SIENPRO - 2018 </a> </li> </menu> </li> <li id="menu_item_39041" class=""> <a alt="CONTATO" title="" target="" class="" href="https://sienpro.catalao.ufg.br/#contato"> CONTATO </a> </li> <li id="menu_item_41617" class="sub"> <a alt="ARTIGOS" title="" target="" class="empty-href"> ARTIGOS </a> <menu class="submenu"> <li id="menu_item_41618" class=""> <a alt="REGRAS PARA SUBMISS&Atilde;O" title="" target="" class="empty-href"> REGRAS PARA SUBMISS&Atilde;O </a> </li> <li id="menu_item_41619" class=""> CSS: .menu_component *{ margin: 0; padding: 0; } .menu_component .dropdown{ width: 100%; height: 67px; background-color: #222; } .dropdown li{ list-style: none; position: relative; float: left; width: 150px; text-align: center; } .dropdown li li{ float: none; width: 200px; text-align: left; } .dropdown li a{ padding: 15px !important; display: block; text-decoration: none; background-color: #222; font-size: 18px; color: #fff; height: 37px; } .dropdown .submenu { position: absolute; z-index: 1000; display: none; } .dropdown li:hover .submenu{ display: block; } .dropdown a:hover{ background-color: #f0f0f0; color: #000; } Link do site: https://sienpro.catalao.ufg.br/ Menu como está: Como eu gostaria que ficasse:
  5. Boa tarde pessoal! Estou com um problema, já tentei de tudo pra centralizar verticalmente este icone no botão, porem, não vai. <div id="search"> <div class="inner"> <form action="ponte_busca.aspx" method="post" name="form_teste"> <div class="button-search"><i class="fa fa-search"></i></div> <input type="search" id="project" name="search" placeholder="Faça sua busca aqui..." value="" /> <input type="hidden" id="project_pasta" name="pasta" value="" /> <input type="hidden" name="codigo_produto" id="project_id" /> </form> </div> </div> #search .button-search { float:right; background: #333; font-size:14px; color:#fff; width:68px; height:41px; text-align:center; line-height:41px; vertical-align: top; border:1px solid #1a1a1a; margin-left:1px; border-radius:0 3px 3px 0; } - Já verifiquei se tinha algo em outro lugar impedindo, mas não achei nada.
  6. Aprenda a centralizar qualquer elemento. Tutorial Como Centrar Vertical e Horizontal com CSS Neste vídeo vamos aprender como podemos centrar qualquer elemento na horizontal e vertical usando somente CSS. ♦ Exemplo também para sites responsivos com bootstrap 3.
  7. Yuka007

    Tentando centralizar um div

    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>
×

Important Information

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