更正 CSS 以替换 img align 元素答案

【问题标题】：Correct CSS to replace img align element更正 CSS 以替换 img align 元素
【发布时间】：2013-07-31 18:11:19
【问题描述】：

在我的页面http://www.imbued.co.uk/ 的页脚中，我在 W3C 合规性测试中遇到错误，这是可以理解的，因为我使用内联对齐属性将社交媒体图标与其相应的文本垂直对齐。什么是正确的 CSS 替代品？如果我删除 align 属性，文本和图像不会都在中心，并且显然没有居中浮动。

【问题讨论】：

【解决方案1】：

有几个选项。最好的可能是设置这些元素的样式以使用margin: auto;

margin-left: 50%;
margin-right: 50%;
margin: auto;

以您的一张图片为例，它看起来像这样：

<img style='margin-left: 50%; margin-right: 50%; margin: auto;' src=... />

当然，您应该将 css 放在一个类中，并将任何您想要的类设置为该类的中心。 css 类看起来像：

.centered {
    margin-left: 50%;
    margin-right: 50%;
    margin: auto;
}

【讨论】：

你能把我放在 CSS 中的什么地方吗？试了几下，好像没保持原样
我已经尝试过您对页脚中 facebook 图片的建议，但文本与图片不对齐，就像 twitter/pinterest 图标一样居中，除非我实施错误跨度>
使用 line-height 和 vertical-align: middle 来解决这个问题。示例：ul li { 显示：块；高度：100px；行高：100px； } ul li img { 垂直对齐：中间； }

【解决方案2】：

align 最好转换为 css text-align

所以

<div align="left">text</div>

变成

<div class="left">text</div>

在css:

.left {
text-align:left;
}

【讨论】：