2

Estou trabalhando com bootstrap + codeigniter e não consigo alinhar os produtos no centro de uma div. Eu gostaria de que os items em azul no centro estivessem alinhados pelo centro.

inserir a descrição da imagem aqui

HTML/PHP

                <div class="col-md-3 col-sm-12 col-centered portfolio-item <?php echo $p->SubCategoria . " " . $p->SubCategoria2 . " " . $p->SubCategoria3 ?>">
                <div class="portfolio-item-inner">

                    <a href="<?php echo base_url("produtos/" . $p->LinkE . "/" . $p->LinkC . "/" .$p->Link) ?>">
                        <div class="media-body circular" style="background: url(<?php echo $Imagem ?>) no-repeat;">

                    </div>

                <p style="margin: 8px;" align="center"><?php echo $p->Titulo ?></p></a>   
                </div>
            </div><!--/.portfolio-item-->

CSS

        #portfolio .portfolio-items {
        margin: -15px;
    text-align: center;
    }

#portfolio .portfolio-item {
    max-width: 290px;
    min-width: 290px;
    //float: left;
    padding: 15px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}


    .row-centered {
        text-align:center;
    }
    .col-centered {
        display:inline-block;
        float:center;
        /* reset the text-align */
        text-align:left;
        /* inline-block space fix */
        margin-right:-4px;
    }
3

2 Respostas 2

2

Adicione uma div principal em seu html. Seu html estava assim:

   <div class="col-md-3 col-sm-12 col-centered portfolio-item <?php echo $p->SubCategoria . " " . $p->SubCategoria2 . " " . $p->SubCategoria3 ?>">
                <div class="portfolio-item-inner">

                <a href="<?php echo base_url("produtos/" . $p->LinkE . "/" . $p->LinkC . "/" .$p->Link) ?>">
                    <div class="media-body circular" style="background: url(<?php echo $Imagem ?>) no-repeat;">

                </div>

            <p style="margin: 8px;" align="center"><?php echo $p->Titulo ?></p></a>   
            </div>
        </div><!--/.portfolio-item-->

Deixe ele assim:

<div class="col-sm-12 centralizar">
   <div class="col-md-3 col-sm-12 col-centered portfolio-item <?php echo $p->SubCategoria . " " . $p->SubCategoria2 . " " . $p->SubCategoria3 ?>">
                <div class="portfolio-item-inner">

                <a href="<?php echo base_url("produtos/" . $p->LinkE . "/" . $p->LinkC . "/" .$p->Link) ?>">
                    <div class="media-body circular" style="background: url(<?php echo $Imagem ?>) no-repeat;">

                </div>

            <p style="margin: 8px;" align="center"><?php echo $p->Titulo ?></p></a>   
            </div>
        </div><!--/.portfolio-item-->
        </div>

Note que eu apenas adicionei a linha <div class="col-sm-12 centralizar"> antes do seu código e fechei a div </div> no fim do seu código.

Você tem uma classe css assim:

.col-centered {
 display: inline-block;
 float: center;
 /* reset the text-align */
 text-align: left;
 /* inline-block space fix */
 margin-right: -4px;
}

Em float você colocou a propriedade center, este valor não existe para o float.

Então deixe este classe css assim:

.col-centered {
 display: inline-block;
 float: none !important;
 /* reset the text-align */
 text-align: left;
 /* inline-block space fix */
 margin-right: -4px;
}

E adicione esta outra classe css:

.col-sm-12.centralizar {
margin: 0 auto !important;
height: auto;
width: 100%;
text-align: center;
float: none !important;
position: inherit;
}

Com isso acredito que vai fazer o que você precisa.

1

Tenta margin: 0 auto; e não tenho seu código completo, peguei seu comentário do código, independente bootstrap pode problema centralizar, quiser forçar centralizar e tenta text-align: center !important ou margin: 0 auto !important

#portfolio .portfolio-items {
  margin: -15px;
  text-align: center;
}
#portfolio .portfolio-item {
  max-width: 290px;
  min-width: 290px;
  //float: left;
  padding: 15px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: center;
  /* reset the text-align */
  text-align: left;
  /* inline-block space fix */
  margin-right: -4px;
}
div.teste {
   margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-3 col-sm-12 col-centered portfolio-item teste">
	<div class="portfolio-item-inner">

		<a href="http://pt.stackoverflow.com">
			<div class="media-body circular" style="background: url(http://pt.stackoverflow.com) no-repeat;">
		</div>

	<p style="margin: 8px;" align="center">TITULO</p></a>   
	</div>
</div><!--/.portfolio-item-->

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 .