Question

我正在尝试使用样式表将我的div中的图像居中在两个类上。我的代码中缺少什么？

苹果居中，文字不是中心，但梨是中心，文字也居中。我希望梨能够居中，但是下面的文字不会居中。

认为这会做到，但它不起作用：

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

http://icons.iconarchive.com/icons/artbees/paradise-fruits/256/Pear-icon.png

奥巴马今天将会见苹果，Twitter和雅虎的领导人。

Bullet Point 1
Bullet Point 2
Bullet Point 3

奥巴马今天将会见苹果，Twitter和雅虎的领导人。

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

将图像包裹在div中：

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

将此添加到您的CSS：

.theimg {
   text-align:center;
}

这是一个更好地代表我给你的想法的JsFiddle。

DEMO

Answer 2

纠正你的CSS

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

我如何只将图像置于我的div而不是文本中心

2 个答案: