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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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