围绕图像中的CSS

我无法弄清楚如何在我的移动网站中心这个形象。围绕图像中的CSS

这里是我使用的代码，我在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; 
}

来源

2015-06-19 Brett Aistrope

首先，相关的HTML是什么样的？其次，你想要它垂直居中还是水平居中？ – Becuzz

所以你的意思是要对齐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>

来源

2015-06-19 16:33:13

假设你想要的元素被水平居中和垂直以及：

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

#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; 
 
}

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

当然还有很多其他的可能性，并且事情会变得复杂当你想添加对IE7或IE8等旧浏览器的支持。在IE11之前，你需要使用表格单元格。 上面的代码片断适用于IE11与现代的浏览器。

我想在中心CSS东西的时候发现了一个相关的和良好的资源是howtocenterincss.com，生成根据您的设置，并选择适合你的CSS。事实上，与Web应用程序的名称相反，它也处理各种对齐。请注意，生成的代码将嵌入在HTML元素中，使用<style>标记，您可以只提取这些样式标记中的内容并移动到CSS文件以供使用。

来源

2015-06-19 17:00:06 matrixanomaly

围绕图像中的CSS

回答

相关问题