我如何将图像居中放置在div中而不是文本中

Question

I'm trying to center an image in my div on two classes with the stylesheet. What am I missing in my code?

The apple is centered with the text not being center, but the pear is center AND the text is centered too. I want the pear to be centered, but the text undernearth to NOT be centered.

Thought this would do it, but it doesn't work:

    .data_cell1_text, .data_cell3_text img {
    display:block; 
    margin:0 auto;
    }

http://jsfiddle.net/wAqrr/23/

<div class="wrapper-data">
<div class="data_row">
    <div class="data_cell1_text">

_{(source: iconarchive.com )}

Obama to meet with leaders from Apple, Twitter, and Yahoo today.

• Bullet Point 1
• Bullet Point 2
• Bullet Point 3

Obama to meet with leaders from Apple, Twitter, and Yahoo today.

• Bullet Point 1
• Bullet Point 2
• Bullet Point 3

.wrapper-data {
position:relative;
width:100%;
border: none;
margin: 40px 0 0 0;
overflow: hidden;

}

.data_row {
    height:100%;
    min-height:100%;
    white-space:nowrap;
    display:table;
    width: 100%;
}

.data_cell1_text {
    width:45%;
    white-space:normal;
    display:table-cell;
}

.data_cell2_text {
    width:10%;
    display:table-cell;
    white-space:normal;
}

.data_cell3_text {
    width:45%;
    display:table-cell;
    white-space:normal;
}

.data_cell1_text, .data_cell3_text img {
    display:block; 
    margin:0 auto;
    }

Answer 1

Wrap your image in a div:

<div class="theimg">
<img src="https://pbs.twimg.com/profile_images/3588564988/ca2ec46372bf01eff59044dd0046132c.jpeg" width="50" height="50">
</div>

Add this to your CSS:

.theimg {
   text-align:center;
}

Here is a JsFiddle to better represent the idea I have given you.

DEMO

Answer 2

Correct your css to this

.data_cell1_text img, .data_cell3_text img {
        display:block; 
        margin:0 auto;
}