Question

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

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

Answer 1

使numberCircle位置：绝对，并使用top和right设置此元素，然后img将位于中心

Answer 2

试试这个

<强> 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>

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

2 个答案: