在嵌套 DIV 的情况下，将图像设置在 DIV 的中间答案

【问题标题】：Set the image in the middle of the DIV in case of nested DIVs在嵌套 DIV 的情况下，将图像设置在 DIV 的中间
【发布时间】：2014-12-23 03:18:57
【问题描述】：

我正在尝试在多个 div 的中心设置一个图像，但该图像仍然略微向右显示。下面是我的代码的 JSfiddle 链接。如果有人知道如何将其居中对齐，请提供帮助。

MY FIDDLE

<div id="TView" class="k-group">
<div id="TestTarget" class="k-group " style="background-color: #323b42">
    <div id="numberCircleDoc" class="numberCircle">3</div>
    <div class="Nav">

        <img src="http://www.wpclipart.com/small_icons/misc_7/.cache/teddy_bear.png"  />
        <br />
        <br />TESTING MGMT</div>
</div>

【问题讨论】：

在我看来它更偏向左侧。向右是什么意思？
对不起，我的意思是向左...这是一个错字。

标签： jquery html css user-interface kendo-ui

【解决方案1】：

试试这个

MY FIDDLE

CSS：

.Nav {
    background-color: #12817b;
    height: 117px;
    width: 172px;
    color: white;
    font-weight: bold;
    padding-top: 20px;
    text-align:center;
}
.Nav:hover {
    background-color: #71B3B0;
}
.numberCircle {
    border-radius: 50%;
    behavior: url(PIE.htc);
    /* remove if you don't care about IE8 */
    width: 10px;
    height: 10px;
    padding: 7px;
    background: #fff;
    border: 2px solid #ffffff;
    color: #12817b;
    text-align: center;
    font: 10px Arial, sans-serif;
    font-weight: bold;
    margin: 4px;
    right: 0;
    position:absolute;
}

#TestTarget {
        display: inline-block;
        text-align: center;
        white-space: nowrap;
        border-style: none;
       position: relative;
}

HTML：

<div id="TView" class="k-group">
    <div id="TestTarget" class="k-group " style="background-color: #323b42">
        <div id="numberCircleDoc" class="numberCircle">3</div>
        <div class="Nav">

            <img src="http://www.wpclipart.com/small_icons/misc_7/.cache/teddy_bear.png"  />
            <br />
            <br />TESTING MGMT</div>
    </div>
</div>

【讨论】：

【解决方案2】：

将numberCircle设置为绝对位置，并使用top和right设置该元素，则img居中

【讨论】：