CSS center content inside div

Question

I need to center html content inside a div class  partners   top div with 2 images   As you can see from the image below  it floats left instead of center of the div      This is my html code    lt div id  partners  gt       lt div class  wrap clearfix  gt           lt h2 gt Partnertnerzy serwisu  lt  h2 gt           lt ul gt               lt li gt  lt a href  http   www dilbert com   gt  lt img width  56  height  16  alt  Parnter bar wika  src   as partners wika png  gt  lt  a gt  lt  li gt                   lt li gt  lt a href  http   www youtube com gt  lt img width  65  height  15  alt  Parnter bar siemens  src   as partners siemens png  gt  lt  a gt  lt  li gt               lt  ul gt           lt a class  linkClose  href   firmy clbp 1  gt Zamknij  lt  a gt       lt  div gt   lt  div gt    Image    CSS    partners   top       position  relative      z-index  100     partners       margin  12px 0 3px      text-align  center     clearfix after   row after       clear  both      content           display  block      height  0      visibility  hidden     partners  wrap       width  655px     wrap       margin  0 auto      position  relative      width  990px     partners h2       color   A6A5A5      float  left      font-weight  normal      margin  2px 15px 0 0     partners ul       float  left    ul       list-style-position  outside      list-style-type  none

User · Answer

The problem is that you assigned a fixed width to your .wrap DIV. The DIV itself is centered (you can see that when you add a border to it) but the DIV is just too wide. In other words the content does not fill the whole width of the DIV.

To solve the problem you have to make sure, that the .wrap DIV is only as wide as it's content.

To achieve that you have to remove the floating in the content elements and set the display property of the block levels elements to inline:

#partners .wrap {
 display: inline;
} 

.wrap { margin: 0 auto; position: relative;}

#partners h2 {
color: #A6A5A5;
font-weight: normal;
margin: 2px 15px 0 0;
display: inline;
}

#partners ul {
display: inline;
}

#partners li {display: inline}

ul { list-style-position: outside; list-style-type: none; }

User · Answer

You just need    parent-div   text-align  center

User · Answer

There are many ways to center any element  I listed some   Set it s width to some value and add margin  0 auto     x000D   x000D   partners   x000D      width  80   x000D      margin  0 auto  x000D    x000D   x000D   x000D       Split into 3 column layout    x000D   x000D   partners   x000D      width  80   x000D      margin-left  10   x000D    x000D   x000D   x000D       Use bootstrap layout    x000D   x000D   lt div class  row  gt  x000D       lt div class  col-sm-4  gt  lt  div gt  x000D       lt div class  col-sm-4  gt Your Content   Image here lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You just do CSS changes for parent div   parent-div            text-align  center          display  block

User · Answer

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

User · Answer

do like this     child      position absolute      margin  auto      top  0      bottom  0      left  0      right  0

[html] CSS center content inside div

Examples related to html

Examples related to css

Examples related to css-float