1

Estou fazendo um trabalho de tema livre em HTML e CSS para o colégio, mas algumas modificações que eu fiz para deixar o site responsivo impedem que eu ajeite um elemento no centro da container. Tenho uma seção do site com uma UL, e cada item tem um botão "download" que aparece no centro quando se passa o mouse em cima do item, mas quando o site é redimensionado ele deixa de estar centralizado.

Tenho o seguinte código no HTML:

        <!-- Terceira seção -->
        <section>
            <h1>Lançamentos Recentes</h1>
            <ul>
                <li class="sec-li-dl">
                    <img src="img/anime/fake1.png"/>
                    <h2>Lançamento 1</h2>
                    <a href="#" target="_blank" class="dl-button">Download</a>
                </li>
                <li class="sec-li-dl">
                    <img src="img/anime/fake2.png"/>
                    <h2>Lançamento 2</h2>
                    <a href="#" target="_blank" class="dl-button">Download</a>
                </li>
                <li class="sec-li-dl">
                    <img src="img/anime/fake3.png"/>
                    <h2>Lançamento 3</h2>
                    <a href="#" target="_blank" class="dl-button">Download</a>
                </li>
                <li class="sec-li-dl">
                    <img src="img/anime/fake4.png"/>
                    <h2>Lançamento 4</h2>
                    <a href="#" target="_blank" class="dl-button">Download</a>
                </li>
            </ul>
        </section>

E no CSS:

/* Seções */
section{
    width: 90%;
    height: auto;
    margin: 0 auto;
    margin-bottom: 25px;
    background-color: white;
    overflow: hidden;
}
/* UL das seções */
section ul{
    margin: 0;
    height: auto;
    width: 100%;
    padding: 0;
    list-style: none;
}
/* Itens das seções */
.sec-li, .sec-li-dl{
    float: left;
    width: 25%;
    height: auto;
    max-height: 306px;
    margin: 0;
    overflow: hidden;
    cursor:pointer;
    position: relative;
}
/* Efeito ao passar o mouse em um item da seção de lançamentos recentes */
.sec-li-dl:hover .dl-button{
    display: initial;
}
/* Botão de download */
/* CENTRALIZAR RESPONSIVAMENTE */
.dl-button{
    width: 100px;
    height: 35px;
    margin: 0 auto;
    /* background-color: #107c0f; */
    background-color: black;
    text-decoration: none;
    color: white;
    font-family: calibri;
    font-size: 18px;
    font-weight: 100;
    text-align: center;
    padding-top: 12px;
    position:absolute;
    bottom: 130;
    left: 100;
    display: none;
}
/* Imagens das seções */
.sec-li a img, .sec-li-dl img{
    width: 100%;
    height: auto;
}
/* Legendas dos itens */
.sec-li h2, .sec-li-dl h2{
    width: 100%;
    height: 50px;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    font-family: calibri;
    font-size: 18px;
    font-weight: 100;
    text-align: center;
    padding-top: 12px;
    position:absolute;
    bottom:0;
}  

E o resultado final:
inserir a descrição da imagem aqui

Preciso que o botão de download fique sempre no centro, independente da dimensão da tela.
Os itens sempre têm uma altura e largura proporcional 1:1.

0

1 Resposta 1

1

Acho que está faltando alguma coisa, pois fui por no jsfiddle e bugou.

#section{
  width:90%;
  margin:0px auto;
  }

#section .item{
  overflow:auto;
  width:25%;
  position:relative;
  float:left;
  }

#section .item img{
  width:100%;
  }

#section .item a{
  display:none;
  position:absolute;
  top:40%;
  left:25%;
  width:50%;
  height:15%;
  background-color:#000000;
  color:#FFFFFF;
  text-decoration:none;
  text-align:center;
  font-size:100%;
  line-height:100%;
  }

#section .item:hover a{
  display:block;
  }
<div id="section">
  <div class="item">
    <img src="https://feitocasulo.files.wordpress.com/2009/12/capa-quadrada.jpg"/>
    <a href="#">Download</a>
    </div>
  <div class="item">
    <img src="https://feitocasulo.files.wordpress.com/2009/12/capa-quadrada.jpg"/>
    <a href="#">Download</a>
    </div>
  <div class="item">
    <img src="https://feitocasulo.files.wordpress.com/2009/12/capa-quadrada.jpg"/>
    <a href="#">Download</a>
    </div>
  <div class="item">
    <img src="https://feitocasulo.files.wordpress.com/2009/12/capa-quadrada.jpg"/>
    <a href="#">Download</a>
    </div>
  </div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .