为什么我的图像没有在中心对齐？答案

【问题标题】：Why is my image not aligning in the center?为什么我的图像没有在中心对齐？
【发布时间】：2013-12-18 16:48:43
【问题描述】：

我无法弄清楚为什么我在标签之间的图像没有与中心对齐，即使我已经声明了 css inline ，但优先级不起作用。

我已经在 <style> 标签中声明 text-align 为左对齐，但我只希望这个特定标签居中对齐，而不是其他标签。

这是我的html，

<td class="ospy_td" style="background-color:#ddd;border-bottom-left-radius:5px;style=text-align:center">
    <label class="ospy_lab" style="text-align:center">
        <img id="bt" src="img/bt.png" width="30" height="29" />
    </label>
</td>

这是我的 CSS，在同一个 html 页面的标签中定义，

.ospy_td, label {
    text-align: left;
    vertical-align: middle;
    cursor: default;
    font-weight:normal;
    color:#0066c0;
};

【问题讨论】：

您介意清理您的代码（从字符串连接中删除引号等）还是至少在此处复制并粘贴页面源代码？
是的，抱歉
你错过了还是在源代码中真的是这样？ <\/label>
您不能在样式中嵌套样式：style=text-align:center 在您的样式属性中。
您的<img/> 需要display: inline 或display: inline-block 才能使text-align 产生任何影响。

标签： html css css-float stylesheet

【解决方案1】：

我在 CSS 和 html 元素的使用中看到了几个错误。

但其中一个造成问题的是 style= 内部样式属性：

jsFiddle）：

HTML

<table>
    <tr>
        <td class="ospy_td">
            <i class="ospy_lab" />
        </td>
    <tr>
</table>

CSS

table {
    width: 100%;
}
td {
    background: #66f;
    text-align: center;
}
.ospy_td {
    background-color: #ddd;
    border-bottom-left-radius: 5px;
    cursor: default;
    vertical-align: middle;
}
i.ospy_lab {
    background-image: (img/bt.png);
    background-position: center center;
    background-repeat: no-repeat;
    font-weight: normal;
    color: #0066c0;
    display: inline-block;
    height: 29px;
    width: 30px;
}

【讨论】：

【解决方案2】：

.ospy_td, label {
    text-align: left; // this is your problem, change to center
}

你忘了分号

 style="text-align:center"

改成

style="text-align:center;"

【讨论】：

OP 希望所有其他人左对齐，而那个特定的人居中。这就是使用内联样式来覆盖此规则的原因。