CODEWITHSUNDEEP
htmlcss
showkey
showkey

Reputation: 298

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

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. enter image description here

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. enter image description here

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

Upvotes: 0

Views: 122

Answers (5)

Itay Joseph
Itay Joseph

Reputation: 23

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 .

Upvotes: 0

Sukrit
Sukrit

Reputation: 318

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/

Upvotes: 0

Abdul Ahmad
Abdul Ahmad

Reputation: 10021

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

Upvotes: 0

JoeyG
JoeyG

Reputation: 741

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

Upvotes: 1

Leo The Four
Leo The Four

Reputation: 699

You can use margin for center align.

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

Upvotes: 0

Related Questions