2014-10-01 20 views
0

我想在我的网站上居中图像中心 - 和加载页面在桌面计算机上时,它看上去很不错,但它看起来像这样形象似乎无法在移动设备上

手机浏览器enter image description here

我用来居中图像的CSS如下;

#logo 
{ 
    max-width: 60%; 
    min-width: 300px; 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 


     <header> 
      <img src="images/500x245.png" id="logo"</img> 
      <h1>Welcome to AppCloud</h1> 
     </header> 

任何人都可以提出一些替代方法,因为我的方式似乎失败了。感谢

+0

附加'文本对齐:中心;'到图像父元素和删除在显示块和页边距 – 2014-10-01 16:18:18

+2

减小最小宽度,将工作完美 – 2014-10-01 16:21:32

+0

确实如此,多么尴尬!非常感谢你的帮助,如果你想提供一个答案,我可以接受它 – Biscuit128 2014-10-01 16:22:52

回答

1

调低min-width它将工作完美

#logo{ 
    max-width: 60%; 
    min-width: 300px; /** <<--- changes to be done here **/ 
    height: auto; 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
}