Estoy tratando de crear un portafolio para freecodecamp, sin embargo, no puedo encontrar cómo centrar el botón o el div etiquetado como "fila" en la página. Necesito el div de fila ya que luego agregaré más botones, pero por ahora solo necesito el botón FCC. A continuación se muestran mis archivos html y css de mi sitio hasta ahora. ¡Cualquier ayuda es bienvenida!

Html:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<!-- Web page starts here -->
<body id="body">
  <section id="land">
      <h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
        <div class="row" id="btnrow">
          <a href="http://www.freecodecamp.com/zacmelendez" class="btn responsive" id="fcc"><i class="fa fa-file-code-o"> Free Code Camp</i></a>
        </div>
  </section>
  <section id="intro">
  </section>
</body>

Css:

#body {
  height: 100vh;
  width: 100%;
}

#mpp {
  font-family: Monospace;
  font-size: 50px;
  color: white;
  padding-top: 15%;
  margin: 0;
}
#land {
  background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
  width: 100%;
  height: 100vh;
}
#fcc {
  background-color: #016403;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 17px;
  position: inherit;
}
#btnrow {
  right: 50%;
}
1
Zach Melendez 27 jul. 2016 a las 04:08

2 respuestas

La mejor respuesta
#btnrow {
  display: flex;
  justify-content: center;
}

Debería hacer el truco. Ver ejemplo de trabajo a continuación

#body {
  height: 100vh;
  width: 100%;
}

#mpp {
  font-family: Monospace;
  font-size: 50px;
  color: white;
  padding-top: 15%;
  margin: 0;
}
#land {
  background: url(http://img.hrhwalls.com/images2/ki13j11c4ef.jpg);
  width: 100%;
  height: 100vh;
}
#fcc {
  background-color: #016403;
  text-decoration: none;
  color: #FFFFFF;
  font-size: 17px;
  position: inherit;
}
#btnrow {
  display: flex;
  justify-content: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

<!-- Web page starts here -->
<body id="body">
  <section id="land">
      <h1 id="mpp" class="text-center"> My Personal Portfolio </h1>
        <div class="row" id="btnrow">
          <a href="http://www.freecodecamp.com/zacmelendez" class="btn responsive" id="fcc"><i class="fa fa-file-code-o"> Free Code Camp</i></a>
        </div>
  </section>
  <section id="intro">
  </section>
</body>
1
Red Mercury 27 jul. 2016 a las 01:13

Puede darle al div un ancho y usar el margen automático para los valores izquierdo y derecho, esto centrará el elemento horizontalmente.

.row {
    margin: 0 auto;
    width: 150px; /*or any measurement*/
}
0
Kenneth Stoddard 27 jul. 2016 a las 13:57