4

¿Porque se me quedan descentrados el botón y el enlace?

introducir la descripción de la imagen aquí

.Portada {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: relative;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 36px;
  outline: none;
  text-decoration: none;
  border: solid 2px;
  border-radius: 28px;
  border-color: #b00000;
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 180px;
  cursor: pointer;
  transition: width 0.2s;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  font-weight: lighter;
  opacity: 0.6;
  display: inline-block;
  text-align: center;
  position: absolute;
  bottom: 30px;
  cursor: pointer;
}
<div class="Contenedor-General">
  <div class="Portada">
    
    <a href="#Contacto">
      <input type="button" id="Btn-Ready" value="¡Trabajemos!">
    </a>

    <a href="#Conoceme">
      <p id="Aprende-Mas">
        Aprende más de lo que hago
        <br>
        <span class="icon-keyboard_arrow_down" id="Aprendes-Mas"></span>
      </p>
    </a>
    
  </div>
</div>

5
  • Una pregunta ¿Por qué metes un botón dentro de un enlace? Es una cosa bastante extraña
    – user7176
    el 10 sep. 2017 a las 18:33
  • @blonfu porque me redirecciona a otra parte de la misma página. Seguro que no es la mejor manera, pero acabo de empezar con la programación web y así es como se me ha ocurrido... ¡¡Acepto sugerencias de como hacerlo mejor!! ¿Quizas debería haberlo hecho con JS?
    – Lleims
    el 10 sep. 2017 a las 18:36
  • No necesitas un enlace y un botón, el botón no está haciendo nada. Podrías usar simplemente un enlace: <a href="#Contacto" id="Btn-Ready">¡Trabajemos!"</a>
    – user7176
    el 10 sep. 2017 a las 18:51
  • @blonfu Al final investigando por internet vi que podía poner botón sin enlace <input type="button" id="Btn-Ready" value="¡Trabajemos juntos!" onclick="location.href='#Contacto'">
    – Lleims
    el 10 sep. 2017 a las 20:24
  • Creo que es complicarse demasiado usar un botón para simular un enlace.
    – user7176
    el 10 sep. 2017 a las 21:27

3 respuestas 3

5

Es debido a su posicion absoluta que no respectan las posiciones heredadas. Remueve position:absolute a ambos y al link agregale display:block para que se convierta en elemento de linea:

.Portada {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: relative;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 36px;
  outline: none;
  text-decoration: none;
  border: solid 2px;
  border-radius: 28px;
  border-color: #b00000;
  font-weight: bold;
  text-align: center;
  /*position: absolute;*/
  bottom: 180px;
  cursor: pointer;
  transition: width 0.2s;
}

#Aprende-Mas {
  
  color: #FFF;
  font-size: 18px;
  font-weight: lighter;
  opacity: 0.6;
  display: inline-block;
  text-align: center;
  /*position: absolute;*/
  display:block; /*convirtiendo el link en elemento de bloque*/
  bottom: 30px;
  cursor: pointer;
}
<div class="Contenedor-General">
  <div class="Portada">
    
    <a href="#Contacto">
      <input type="button" id="Btn-Ready" value="¡Trabajemos!">
    </a>

    <a href="#Conoceme">
      <p id="Aprende-Mas">
        Aprende más de lo que hago
        <br>
        <span class="icon-keyboard_arrow_down" id="Aprendes-Mas"></span>
      </p>
    </a>
    
  </div>
</div>

2
  • Hola @Einer muchas gracias por ayudarme tantas veces, el problema es que esa posición absoluta está para mandar eso a la parte inferior de la página. ¿Como lo pondrías entonces en la parte inferior? Saludos!
    – Lleims
    el 10 sep. 2017 a las 17:16
  • 1
    Cuando dices a la parte inferior ¿te refieres a esto?
    – Einer
    el 10 sep. 2017 a las 17:20
1

Céntralos horizontalmente usando transform:

.Portada {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: relative;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 36px;
  outline: none;
  text-decoration: none;
  border: solid 2px;
  border-radius: 28px;
  border-color: #b00000;
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 180px;
  cursor: pointer;
  transition: width 0.2s;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  font-weight: lighter;
  opacity: 0.6;
  display: inline-block;
  text-align: center;
  position: absolute;
  bottom: 30px;
  cursor: pointer;
}

#Btn-Ready,
#Aprende-Mas {
  left: 50%;
  transform: translateX(-50%);
}
<div class="Contenedor-General">
  <div class="Portada">
    
    <a href="#Contacto">
      <input type="button" id="Btn-Ready" value="¡Trabajemos!">
    </a>

    <a href="#Conoceme">
      <p id="Aprende-Mas">
        Aprende más de lo que hago
        <br>
        <span class="icon-keyboard_arrow_down" id="Aprendes-Mas"></span>
      </p>
    </a>
    
  </div>
</div>

1

Otra opción sería añadir estas propiedades a los elementos que quieres centrar:

left:0;
right:0;
margin-left:auto;
margin-right:auto;

.Portada {
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  position: relative;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 18px;
  background-color: transparent;
  color: #FFF;
  line-height: 36px;
  outline: none;
  text-decoration: none;
  border: solid 2px;
  border-radius: 28px;
  border-color: #b00000;
  font-weight: bold;
  text-align: center;
  position: absolute;
  bottom: 180px;
  cursor: pointer;
  transition: width 0.2s;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  font-weight: lighter;
  opacity: 0.6;
  display: inline-block;
  text-align: center;
  position: absolute;
  bottom: 30px;
  cursor: pointer;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
<div class="Contenedor-General">
  <div class="Portada">

    <a href="#Contacto">
      <input type="button" id="Btn-Ready" value="¡Trabajemos!">
    </a>

    <a href="#Conoceme">
      <p id="Aprende-Mas">
        Aprende más de lo que hago
        <br>
        <span class="icon-keyboard_arrow_down" id="Aprendes-Mas"></span>
      </p>
    </a>

  </div>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.