Jump to content
Gabrielvt14

Como centralizar todo conteudo de uma div - Bootstrap

Recommended Posts

Olá. Estou aprendendo a usar o bootstrap. Em meus estudos me surgiu uma duvida. Se há como centralizar todo conteudo de uma div. Tenho códigos de exemplo...

 

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
	<div class="container-fluid">
		<div class="container">
			<h1>Bootstrap <small>Meu primeiro site</small></h1>
			<p>Usando o bootstrap</p>
		</div>
		<div class="container" id="homer">
			<div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
				<img src="1.png" class="img-responsive">	
			</div>
			<div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
				<img src="1.png" class="img-responsive">	
			</div>
			<div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
				<img src="1.png" class="img-responsive">	
			</div>
			<div class="container col-xs-12 col-sm-6 col-md-6 col-lg-3">
				<img src="1.png" class="img-responsive">	
			</div>
		</div>
		<div class="container" id="planos">
			<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black">
				<p>Lorem Ipsum</p>
				<p>Lorem Ipsum</p>
				<p>Lorem Ipsum</p>
			</div>
			<div class="row col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: black">
				<h3>Nossos Planos</h3>
				<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<button class="btn btn-primary">Lorem Ipsum</button>
				</div>
				<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<button class="btn btn-primary">Lorem Ipsum</button>
				</div>
				<div class="row col-xs-12 col-sm-12 col-md-12 col-lg-12">
					<button class="btn btn-primary">Lorem Ipsum</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

 

 

No id="planos" tenho tres botões, quero eles um abaixo do outro, dentro da mesma row, até ai beleza. Mas queria centralizar na div esses botoes... O texto "Nossos Planos" eu consigo centralizar com "text-align", mas teria uma forma de eu centralizar os botões ou qualquer outro conteudo de uma div?

desde já grato!

Share this post


Link to post
Share on other sites

Pra isso não é necessário editar o style no elemento, o HTML fica feio. Pra isso basta adicionar a class 'text-center' que ele centraliza.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By Carlos Web Soluções Web
      Olá pessoal !!
      Estou desenvolvendo um menu em CSS, e eu gostaria de colocá-lo no CSS Responsive:
       
      @media screen and (max-width: 800px) {
      }
       
      O link do menu de como está atual se encontra em:
      MENU Link

      e o que eu desejo alcançar é:
      MENU RESPONSIVE

      Por favor me ajudem.....abraço !!
    • By lordstarlight
      Olá galera,
       
      Tenho um código que abre uma janela modal clicando num botão .
      Como faço para adaptar esse código para abrir usando um <input type="image" ... ?
       
      Abraço !!!
      <script type="text/javascript"> $('#myModal').on('shown.bs.modal', function () { $('#myInput').trigger('focus') }) </script> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">&times;</button> <h4 class="modal-title">Janela Modal</h4> </div> <div class="modal-body"> <p>Texto<br> Mais Texto<br> </p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.