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

Asked

Viewed 478 times

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>

<!-- Minified JavaScript -->
<script src="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>

How it looks on my page here on my computer. inserir a descrição da imagem aqui One side’s bigger than the other.

So I used col-Md-10, so I wanted it centered. How do I do that?

css html5 bootstrap-3

  • Use the class col-offset-md-2 or center

3 answers

2


ultilize the tag with the class:

<div class="container">

1

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

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

0

Good Afternoon,

You need to make some changes to your css for the centering to work 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 of your list, as in what was commented , and also convert the list text to boldinserir a descrição da imagem aqui

Browser other questions tagged css html5 bootstrap-3

You are not signed in. Login or sign up in order to post.