Align DIVS in CENTER

1

I'm working with bootstrap + codeigniter and I can not align the products in the center of a div. I would like the blue items in the center to be centered aligned.

HTML/PHP

<divclass="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;
    }
    
asked by anonymous 30.06.2016 / 19:32

2 answers

2

Add a main div to your html. Your html looks like this:

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

Leave it like this:

<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 that I just added the line <div class="col-sm-12 centralizar"> before your code and closed the </div> div at the end of your code.

You have a css class like this:

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

In float you have set the property center , this value does not exist for float .

Then leave this css class like this:

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

And add this other css class:

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

With this I believe you will do what you need.

    
01.07.2016 / 23:54
1

Try margin: 0 auto; and I do not have your complete code, I got your code comment, independent bootstrap can problem centralize, want to force center and try text-align: center !important or 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><scriptsrc="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-->
    
30.06.2016 / 19:51