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


Forums

  • Q&A Desenvolvimento
    • Perguntas e respostas rápidas
  • Desenvolvimento e Banco de Dados
    • HTML e CSS
    • Java
    • Javascript
    • .NET
    • PHP
    • Python
    • Ruby
    • Mobile
    • Ambientes de Desenvolvimento
    • Arquitetura e Métodos Ágeis
    • Banco de Dados
    • DevOps
    • Desenvolvimento de Games
    • E-Commerce e Pagamentos Online
    • SEO e Otimizações
    • WordPress
    • Algoritmos & Outras Tecnologias
  • Design e Produto
    • Fotografia
    • Photoshop
    • Design de interfaces e UX
    • Edição/Produção de Vídeos
    • Marketing Online
    • Desenho, Ilustração e 3D
  • Entretenimento e uso pessoal
    • Geral
    • Segurança & Malwares
    • Gadgets e wearable
    • Softwares e Apps
    • Entretenimento

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 10 results

  1. 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.
  2. 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:
  3. 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.
  4. 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.
  5. 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>
  6. william_developer

    CENTRALIZAR UMA DIV DINAMICAMENTE

    Boa tarde; Pessoal, Como faço para centralizar um DIV que inicialmente está "Escondida" e sob a ação de um EVENT ONCLICK eu chamo-a e centralizo-a no meio da tela independente do tamanho do DISPLAY ?
  7. ruancordel

    Não consigo centralizar meu site

    Galera estou com um grande problema, já tentei mudar tudo e até agora nada, não consigo centralizar as imagens o meu site do wordpress, vou mandar o link pra ver o que acham: www.fenekids.com.br já tentei de tudo e nada, alguém pra ajudar
  8. natant1

    alinhar input ao centro da div

    Alguém tem alguma solução para subir com esse input para deixar ele meio que centralizado na div? Ja tentei de tudo que eu conheço e não consigo. SOCORRO!!! Como fica: Como eu quero: código: https://jsfiddle.net/natant1/6khds56a/1/ ou HTML: <div id="pesquisaArtista"> <label for="artista">Artista: <input id="artista" name="artista" type="text"/> </label> </div> <div id="pesquisaGenero"> <label for="genero">Gênero: <input id="genero" name="genero" type="text"/> </label> </div> <div id="pesquisaAlbum"> <label for="album">Álbum: <input id="album" name="album" type="text"/> </label> </div> CSS: #pesquisaArtista{ background-color: #4aae27; height: 40px; width: 90%; max-width: 300px; padding-top: 0px; display: inline-block; } #pesquisaArtista label{ color: white; font-family: Agency FB; font-size: 1.9em; } #pesquisaArtista input{ position: relative; color: grey; padding: 5px; width: 170px; margin-top: -30px; } #pesquisaGenero{ background-color: #cda009; height: 40px; width: 90%; max-width: 300px; padding-top: 0px; color: white; display: inline-block; } #pesquisaGenero label{ color: white; font-family: Agency FB; font-size: 1.9em; } #pesquisaGenero input{ position: relative; color: grey; padding: 5px; width: 170px; margin-top: -30px; } #pesquisaAlbum{ background-color: #053d74; height: 40px; width: 90%; max-width: 300px; padding-top: 0px; display: inline-block; } #pesquisaAlbum label{ color: white; font-family: Agency FB; font-size: 1.9em; } #pesquisaAlbum input{ position: relative; color: grey; padding: 5px; width: 170px; margin-top: -30px; }
  9. Olá pessoal. Tenho uma div que preciso centralizar-la verticalmente mas não estou conseguindo... visualmente o conteúdo dessa div está ficando a 50% do bottom. .foto_listas { position: absolute; width: 100px; height: 100px; margin-top: -50px; top: 50%; border-radius: 50px; margin-left: 0px; } Poderiam me ajudar? Grato desde já!!!
  10. Gente, eu to fazendo um site de sonic para eu praticar: projetosonic.pe.hu (sou iniciante) só que na primeira postagem o texto não ta alinhado, e se eu diminuir ele fica passando dos limites. Queria saber se tem como aliar ele em php ou html, para quando eu diminuir ele não ficar maior e nem menor do que o section. Se alguem saber ficarem grato!
×

Important Information

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