How to center a text in the middle of the page?

2

I'm using bootstrap 3. I want to center a text as the example below.

@import url('https://fonts.googleapis.com/css?family=Anton|Black+Han+Sans|Open+Sans+Condensed:300');

/*
font-family: 'Black Han Sans', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
*/

#topo {
  text-align: center;
  font-family: 'Black Han Sans', sans-serif;
}

#titulo {
  text-align: center;
  font-family: 'Anton', sans-serif;
}

p {
  text-align: justify;
  font-size: 20px;
  position: relative;
  margin-left: 50px;
  margin-top: 10px;
  margin-right: 25px;
  font-family: 'Open Sans Condensed', sans-serif;
}

hr {
  border: #fde192 solid 2px;
  width: 200px;
  margin: 0 auto;
}
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><!--MinifiedJavaScript--><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<head>
  <title>ÂNCORAS DE CARREIRA</title>
  <meta charset="utf-8" />

  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>

  <!---Parte de cima da apresentação-->
  <h1 id="topo">Teste</h1>
  <hr>
  <h2 id="titulo">Âncoras de Carreira</h2>
  <hr>

  <!---Apresentação do teste-->
  <div class="row text-center col-md-4">
    <p>Na década de 1970, Edgar Schein, PhD em psicologia social pela Universidade de Harvard e professor emérito da Sloan School of Management, a escola de negócios do Massachusetts Institute of Technology (MIT), nos Estados Unidos, desenvolveu a teoria
      das âncoras da carreira. Apesar de antiga, a teoria do teste âncora de carreira continua sendo válida para quem busca maior autoconhecimento para direcionar a própria vida profissional.Segundo Schein, as âncoras – oito no total – são pilares que
      norteiam as decisões de carreira dos profissionais. O teste âncoras de carreira, se objetiva em fazer com que cada profissional possa descobrir quais são as suas âncoras:

      <li>autonomia;</li>
      segurança; competência técnico-funcional; competência administrativa geral; criatividade empreendedora; dedicação a uma causa; desafio puro; estilo de vida Elas representam a combinação única de cada um em relação à percepção de competência de carreira,
      motivos e valores. Sabendo quais são as suas âncoras, fica mais fácil encontrar a melhor empresa para você trabalhar, em que seu perfil esteja alinhado com a cultura organizacional. O teste é longo – 40 perguntas -, por isso reserve um tempo para
      fazê-lo. Mas dá para fazer sozinho! Tome fôlego e dê mais um passo rumo à sua felicidade profissional.</p>
  </div>

</body>

As it is on my page here on my computer. One side is bigger than the other.

Then I used col-md-10, hence I wanted it centralized. How do I do this?

    
asked by anonymous 19.04.2018 / 01:39

3 answers

2

Use the tag with the class:

<div class="container">
    
19.04.2018 / 01:53
1

Another hypothesis was within div with class="col-md-10" having the following style

<div class="col-md-10" style="margin:0 auto;text-align:center;">
    
19.04.2018 / 19:18
0

Good afternoon,

You need to make some changes in your css so that centralization works by separating the texts into two paragraphs as represented,

@import url('https://fonts.googleapis.com/css?family=Anton|Black+Han+Sans|Open+Sans+Condensed:300');

/*
font-family: 'Black Han Sans', sans-serif;
font-family: 'Anton', sans-serif;
font-family: 'Open Sans Condensed', sans-serif;
*/

#topo {
  text-align: center;
  font-family: 'Black Han Sans', sans-serif;
}

#titulo {
  text-align: center;
  font-family: 'Anton', sans-serif;
}

p {
  text-align: justify;
  font-size: 20px;
  position: relative;
  margin-left: 50px;
  margin-top: 10px;
  margin-right: 25px;
  font-family: 'Open Sans Condensed', sans-serif;
}
li {
 font-size: 20px;
 position: relative;
 margin-left: 50px;
 margin-top: 10px;
 margin-right: 25px;
 font-family: 'Open Sans Condensed', sans-serif;
 /*list-style: none*/
 /*font-weight: bold;*/
}
hr {
  border: #fde192 solid 2px;
  width: 200px;
  margin: 0 auto;
}

And, if you prefer, you can change or remove the style from your list, like the one you mentioned, and also convert the list text to bold

    
19.04.2018 / 21:40