CSS center content inside div
To center a div, set it's width to some value and add margin: auto.
#partners .wrap {
width: 655px;
margin: auto;
}
EDIT, you want to center the div contents, not the div itself. You need to change display property of h2
, ul
and li
to inline
, and remove the float: left
.
#partners li, ul, h2 {
display: inline;
float: none;
}
Then, they will be layed out like normal text elements, and aligned according to text-align property of their container, which is what you want.
There are many ways to center any element. I listed some
- Set it's width to some value and add margin: 0 auto.
.partners {
width: 80%;
margin: 0 auto;
}
- Split into 3 column layout
.partners {
width: 80%;
margin-left: 10%;
}
- Use bootstrap layout
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4">Your Content / Image here</div>
</div>
You just need
.parent-div { text-align: center }
Try using flexbox. As an example, the following code shows the CSS for the container div inside which the contents needs to be centered aligned:
Depending on the axis of the flexbox, you will need to align or justify items, read more at MDN
.absolute-center {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
justify-content: center;
}
You just do CSS changes for parent div
.parent-div {
text-align: center;
display: block;
}