Off-center element

0

Good What is the cause of the badly focused link (work together)?

.Portada {
  height: 100vh;
  width: 100%;
  background-image: url(../Img/fondo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

HEADER {
  height: 80px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s;
}

#Barra-Navegacion {
  display: table;
  margin: auto;
  margin-top: 15px;
  height: 40px;
  transition: margin-left 0.3s;
}

#Barra-Navegacion ul {
  display: block;
  float: left;
  list-style: none;
}

img#Logo {
  height: 60px;
  display: block;
  margin: 0 30px;
  float: left;
  transition: width 0.3s, height 0.3s, margin-top 0.3s, margin-right 0.3s;
}

#Barra-Navegacion ul li {
  float: left;
  margin: 10px;
  padding: 10px;
}

#Barra-Navegacion ul li a {
  color: #FFF;
  opacity: 0.8;
}

#Barra-Navegacion ul li a:visited {
  color: #FFF;
}

#Frase-Presentacion-Introduccion {
  font-size: 34px;
  font-weight: bold;
  color: #FFF;
  opacity: 0.9;
  position: relative;
  top: 25%;
}

#Frase-Presentacion {
  font-size: 24px;
  font-weight: lighter;
  color: #FFF;
  opacity: 0.9;
  position: relative;
  top: 28%;
}

.Conbtenedor-Contacto {
  height: 200px;
  width: auto;
  background-color: forestgreen;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 24px;
  background-color: transparent;
  color: #FFF;
  font-weight: bold;
  line-height: 36px;
  outline: none;
  position: absolute;
  bottom: 10%;
  border: solid 2px;
  border-radius: 28px;
  border-color: #FFF;
  cursor: pointer;
  transition: width 0.2s;
}

#Btn-Ready:hover {
  width: 320px;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  font-weight: lighter;
  opacity: 0.6;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 1%;
  cursor: pointer;
}

#Aprende-Mas:hover {
  opacity: 1;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}

#Aprende-Mas:hover .icon-keyboard_arrow_down {
  opacity: 1;
}
<div class="Portada">

  <HEADER>

    <nav id="Barra-Navegacion">
      <ul>
        <li><a href="#Portada" id="PECHA" onclick="pruebaPecha();">Portada</a></li>
        <li><a href="#Conoceme">Mis destrezas</a></li>
        <li><a href="#Mis-Proyectos">Mis proyectos</a></li>
      </ul>

      <img id="Logo" src="Img/logo200px.png" alt="Logo NEA">

      <ul>
        <li><a href="#Contacto">¿Trabajamos juntos?</a></li>
        <li><a href="#Mis-Datos">¿Nos vemos?</a></li>
      </ul>
    </nav>

  </HEADER>

  <a name="Portada"></a>
  <!--<img id="Fondo-Portada" src="Img/fondo.jpg" alt="Fondo">-->

  <p id="Frase-Presentacion-Introduccion">
    ¡Bienvenido! Me llamo Carlos.
  </p>

  <p id="Frase-Presentacion">
    Soy un futuro ingeniero industrial y apasionado desarrollador web.
  </p>

  <div class="Contenedor-Contacto">

  </div>
  <a href="#Contacto" id="Btn-Ready">¡Trabajemos juntos!</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>
    
asked by NEA 16.09.2017 в 16:55
source

1 answer

2

The problem seems to be that you have it defined as absolute position, you define the vertical positioning (with bottom:10% ) but you do not define the horizontal positioning. When #Btn-ready add a left:50% to center the element and a transform: translate(-50%, -50%) to center it with respect to the midpoint of the element (instead of with respect to the upper left corner).

Here you can see it running:

html, body {
  background:#333;
}

.Portada {
  height: 100vh;
  width: 100%;
  background-image: url(../Img/fondo.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

HEADER {
  height: 80px;
  width: 100%;
  background-color: transparent;
  position: absolute;
  top: 0;
  left: 0;
  transition: background-color 0.3s;
}

#Barra-Navegacion {
  display: table;
  margin: auto;
  margin-top: 15px;
  height: 40px;
  transition: margin-left 0.3s;
}

#Barra-Navegacion ul {
  display: block;
  float: left;
  list-style: none;
}

img#Logo {
  height: 60px;
  display: block;
  margin: 0 30px;
  float: left;
  transition: width 0.3s, height 0.3s, margin-top 0.3s, margin-right 0.3s;
}

#Barra-Navegacion ul li {
  float: left;
  margin: 10px;
  padding: 10px;
}

#Barra-Navegacion ul li a {
  color: #FFF;
  opacity: 0.8;
}

#Barra-Navegacion ul li a:visited {
  color: #FFF;
}

#Frase-Presentacion-Introduccion {
  font-size: 34px;
  font-weight: bold;
  color: #FFF;
  opacity: 0.9;
  position: relative;
  top: 25%;
}

#Frase-Presentacion {
  font-size: 24px;
  font-weight: lighter;
  color: #FFF;
  opacity: 0.9;
  position: relative;
  top: 28%;
}

.Conbtenedor-Contacto {
  height: 200px;
  width: auto;
  background-color: forestgreen;
}

#Btn-Ready {
  height: auto;
  width: 300px;
  font-size: 24px;
  background-color: transparent;
  color: #FFF;
  font-weight: bold;
  line-height: 36px;
  outline: none;
  position: absolute;
  bottom: 10%;
  border: solid 2px;
  border-radius: 28px;
  border-color: #FFF;
  cursor: pointer;
  transition: width 0.2s;
  /* código añadido */
  left:50%;
  transform: translate(-50%, -50%);
}

#Btn-Ready:hover {
  width: 320px;
}

#Aprende-Mas {
  color: #FFF;
  font-size: 18px;
  font-weight: lighter;
  opacity: 0.6;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 1%;
  cursor: pointer;
}

#Aprende-Mas:hover {
  opacity: 1;
}

.icon-keyboard_arrow_down {
  color: #FFF;
  font-size: 28px;
  opacity: 0.6;
}

#Aprende-Mas:hover .icon-keyboard_arrow_down {
  opacity: 1;
}
<div class="Portada">

  <HEADER>

    <nav id="Barra-Navegacion">
      <ul>
        <li><a href="#Portada" id="PECHA" onclick="pruebaPecha();">Portada</a></li>
        <li><a href="#Conoceme">Mis destrezas</a></li>
        <li><a href="#Mis-Proyectos">Mis proyectos</a></li>
      </ul>

      <img id="Logo" src="Img/logo200px.png" alt="Logo NEA">

      <ul>
        <li><a href="#Contacto">¿Trabajamos juntos?</a></li>
        <li><a href="#Mis-Datos">¿Nos vemos?</a></li>
      </ul>
    </nav>

  </HEADER>

  <a name="Portada"></a>
  <!--<img id="Fondo-Portada" src="Img/fondo.jpg" alt="Fondo">-->

  <p id="Frase-Presentacion-Introduccion">
    ¡Bienvenido! Me llamo Carlos.
  </p>

  <p id="Frase-Presentacion">
    Soy un futuro ingeniero industrial y apasionado desarrollador web.
  </p>

  <div class="Contenedor-Contacto">

  </div>
  <a href="#Contacto" id="Btn-Ready">¡Trabajemos juntos!</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>
    
answered by 16.09.2017 / 17:59
source