html - 什么 CSS 可以用 替换 标签并具有相同的放置行为

Question

我有以下标记:

https://jsfiddle.net/charleso/v66afdpx/

html:

<p class="title">
   <img class="logo" src="images/logo-A.png" /><span>Log in</span>
</p>

CSS:

<link href="css/style-A.css" rel="stylesheet" />

我为另外两个主题重复了相同的结构:style-B.css 和 style-C.css

每个都有不同的 Logo 图像和颜色集。更改颜色集很容易，我们如何更改每个主题中使用的 Logo 图像？

实际上，我该如何替换 :

<img class="logo" src="images/logo-A.png" /><span>Log in</span>

与:

<div class="logo"></div><span>Log in</span>

并且具有与跨度相同的对齐方式？

或者，是否有更好的方法来实现相同的目标？

谢谢。

Answer 1

图像的默认对齐方式是:

 display: inline;

只需将此属性添加到您的 .logo div!

此外，您可以通过设置正确的宽度和高度来更改图像，并以这种方式添加正确的背景图像:

.logo {
    min-height: 60px;
    min-width: 60px;
    background: url(../images/logo-A.png)no-repeat center center;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}