Question

我无法弄清楚如何将这张图片放在我的移动网站上。

这是我正在使用的代码，我是CSS的初学者，所以我确信这是一个简单的修复。只是需要一些帮助。感谢

#emotion-header-img {
    display:none;
}
#emotion-header {
    height:100px !important;
    background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
}

Answer 1

假设您希望元素水平和垂直居中：

/* generated from howtocenterincss.com, personally tried and tested! */

＆＃13;

#emotion-header {
        display:flex;
        justify-content:center;
        align-items:center;
        /* height:100px !important; no need for this if you don't want to limit size*/
        background-repeat:no-repeat !important;
        background-size:contain !important;
}

#emotion-header-img {
  
        height: 100px;
}

＆＃13;

<div id="emotion-header">
  <img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \>
 </div>

＆＃13;

当您想要添加对IE7或IE8等旧浏览器的支持时，当然还有很多其他可能性，并且事情变得复杂。在IE11之前的任何内容中，您都需要使用表格单元格。 以上代码段适用于IE11和现代浏览器。

相关且良好的资源我在尝试将内容集中在howtocenterincss.com时发现，它会根据您的设置和选择为您生成正确的CSS。实际上，与Web应用程序的名称相反，它也处理各种对齐。请注意，生成的代码将嵌入到带有<style>标记的HTML元素中，您只需提取这些样式标记内的内容并移至CSS文件即可使用。

Answer 2

所以你的意思是想对齐background-image？如果正确，您可以使用background-position。例如：

#emotion-header {
  width: 200px;
  height: 200px;
  border: 1px solid #ddd;
  background-image: url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: center;
}

<div id="emotion-header"></div>

在CSS中居中图像

2 个答案: