How to make all the content placed in the center of div?

Question

The {margin:0 auto} can't make all the content center-placed in my case.

div.whole {
  width: 620px;
  overflow: auto;
  border: 2px solid red;
}
div.left,
div.right {
  margin: 0 auto;
  float: left;
  width: 300px;
  height: 200px;
  border: 2px solid black;
}
li {
  list-style: none;
  margin: 0 0;
  padding 0 0 0 0;
  display: inline-block;
  border-bottom: 1px dashed black;
  width: 100px;
}

<div class="whole">
  <div class="left">
    <img src="images/pic.png" width="120" height="120" />
  </div>
  <div class="right">
    <ul>
      <li>x1</li>
      <li>y1</li>
    </ul>
    <ul>
      <li>x2</li>
      <li>y2</li>
    </ul>
    <ul>
      <li>x3</li>
      <li>y3</li>
    </ul>
    <ul>
      <li>x4</li>
      <li>y4</li>
    </ul>
  </div>
</div>

The displayed effect is as the following.

How to put the left content--img photo and the right content in the center of div.left and div.right ? How to put the left content--img photo and the right content in the center of div.left and div.right ?With the help of shareeditflag, display: inline-block;vertical-align: middle; added into my css,the css file was changed into following:

div.whole{
     width:620px;
     overflow:auto;
     border:2px solid red;
     text-align: center;}

div.left,div.right{
    display: block;
    margin: 0 auto;
    height: 100%;
    float:left;
    width:300px;
    height:200px;
    border:2px solid black; 
  vertical-align: middle;}

li{ 
    list-style:none;
    display: inline-block;
    vertical-align: middle;
    padding 0 0 0 0;
    display:inline-block;   
    border-bottom: 1px dashed black;
    width:100px;}

<div class="whole">
    <div class="left">
       <img src="images/pic.png"  width="120"  height="120"/>
    </div>
    <div class="right">        
        <ul>
        <li>x1</li><li>y1</li> 
        </ul>
        <ul>
        <li>x2</li><li>y2</li> 
        </ul>
        <ul>
        <li>x3</li><li>y3</li> 
        </ul><ul>
        <li>x4</li><li>y4</li> 
        </ul>
    </div>
</div>

The displayed effect was changed into the following.

ALL the content were made center horizontally,
How to make the content vertically?

consider using `text-align: center` in your DIV to horizontally align your elements. — mightyheptagon, Feb 29 '16 at 15:06
Possible duplicate of [Center image using text-align center?](http://stackoverflow.com/questions/7055393/center-image-using-text-align-center) — Serlite, Feb 29 '16 at 15:07

JoeyG · Answer 1 · 2016-02-29T15:13:52.100

1

Centering the image in the Div you could use padding: to align. on .div-left

Centering the text content should be as simple as a text-align:centeron .div-right

edited Feb 29 '16 at 15:13

answered Feb 29 '16 at 15:05

JoeyG

701
6
10

score 0 · Answer 2 · answered Feb 29 '16 at 15:11

0

You can use margin for center align.

<head>
<style>
div {
    margin: auto;
    width: 60%;
    border: 3px solid #73AD21;
    padding: 10px;
}
</style>
</head>

answered Feb 29 '16 at 15:11

Leo The Four

699
9
14

score 0 · Accepted Answer · answered Feb 29 '16 at 15:13

there's a way to make anything centered. You don't need to know the height or width of any component, except the parent's. This involves a couple of things:

heres a fiddle example: https://jsfiddle.net/ahmadabdul3/eed1n1kj/1/

make sure the parent has an explicit height. I say this because html and body are sometimes forgotten. set their heights to 100%. The next thing is, every parent until your centered component should have some sort of height.

This is required for the centered-helper class that you will see.

The second thing is, the parent of the centered content should have text-align: center so that it can be centered horizontally.

Finally, the centered content should be set to vertical-align: middle along with the centered-helper should have height 100% so that it can help center your content vertically.

html:

<div class='parent'>
  <div class='centered'>
    centered
  </div>
  <div class='centered-helper'>

  </div>
</div>

css:

.parent {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  text-align: center;
}

.centered {
  display: inline-block;
  vertical-align: middle;
}
.centered-helper {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

ALL the content were made center horizontally, How to make the content vertically? — showkey, Mar 01 '16 at 05:14

score 0 · Answer 4 · answered Feb 29 '16 at 15:14

0

The text-align property will apply to images also.

So you could do this:

.left, .right {
    text-align: center;
}

And this will center the image too.

jsFiddle: https://jsfiddle.net/sukritchhabra/uxve3n53/

answered Feb 29 '16 at 15:14

Sukrit

308
2
12

score 0 · Answer 5 · answered Feb 29 '16 at 16:53

0

Short way for margin is (THe first is for top and bottom the second is for left and right.

    Margin:0 auto;

make sure that you give this the a child of a div .

answered Feb 29 '16 at 16:53

Itay Joseph

23
1
8

How to make all the content placed in the center of div?

5 Answers5