2

eu estou utilizando o bootstrap 3. Quero centralizar um texto conforme o exemplo abaixo.

@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>

Como fica na minha página aqui no meu computador. inserir a descrição da imagem aqui Fica um lado maior que o outro.

Aí eu utilizei o col-md-10, daí queria ele centralizado. Como faço isso?

1
  • Utilize a classe col-offset-md-2 ou center 18/04/2018 às 23:55

3 Respostas 3

2

ultilize a tag com a classe:

<div class="container">

1
1

Uma outra hipótese era dentro da div com a class="col-md-10" tivesse o seguinte style

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

Boa Tarde,

Você Precisa fazer algumas alterações no seu css para que a centralização, funcione separando os textos em dois parágrafos como representado,

@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;
}

e se você preferir pode alterar ou remover o estilo da sua lista, como no que foi comentado , e também converter o texto das listas para negritoinserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .