Align DIVS in CENTER

Question

Align DIVS in CENTER

Asked 8 years, 5 months ago

Viewed 6,493 times

2

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

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

Put the code in Jsfiddle here is cut.

– Steve Angello

2016/06/30 at 17:39
but has a looping to display the products, I do not know if it will work very well.

– Davi R Rossini

2016/06/30 at 17:51
Here you will find a complete guide, with the ways to center vertically, horizontally and both. https://css-tricks.com/centering-css-complete-guide/

– Skramewell

2016/07/01 at 15:39

2 answers

2

Add a main div to your html. Your html was 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 him 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 put the property center, this value does not exist for the float.

So 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 that I believe you will do what you need.

Browser other questions tagged html css div alignment

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

by KingRider • **532** points · Answer 1 · 2016-06-30T17:51:05+00:00

Tries margin: 0 auto; and I don’t have your full code, I got your comment code, independent bootstrap can centralize problem, want to force centralize 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>
<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://answall.com">
			<div class="media-body circular" style="background: url(http://answall.com) no-repeat;">
		</div>

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