Ir para conteúdo

Pesquisar na Comunidade

Mostrando resultados para as tags ''centralizar''.

  • Pesquisar por Tags

    Digite tags separadas por vírgulas
  • Pesquisar por Autor

Tipo de Conteúdo


Todas as áreas do Fórum

  • 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

Encontrar resultados em...

Encontrar resultados que...


Data de Criação

  • Início

    FIM


Data de Atualização

  • Início

    FIM


Filtrar pelo número de...

Data de Registro

  • Início

    FIM


Grupo


Google+


Hangouts


Skype


Twitter


deviantART


Github


Flickr


LinkedIn


Pinterest


Facebook


Site Pessoal


Localização


Interesses

Encontrado 10 registros

  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. Lucas Shimura

    Centralizar texto verticalmente em MENU (CSS)

    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. Ezegram

    Não consigo centralizar este icone

    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. mnmn

    Centralizar DIV verticalmente

    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. Pedro98

    Como colocar o texto centralizado no section

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

Informação importante

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