当页面第一次加载时，文本对齐屏幕左侧

问题描述：

我有一个问题，当用户第一次加载页面时，我的网页上的文本似乎对齐左侧。刷新后或返回到同一页面（在同一个选项卡中），然后工作正常。当页面第一次加载时，文本对齐屏幕左侧

目前我已经有一个与它的网站标志的div和div文本中的文本。我认为这个问题与标志加载速度不够快有关，导致文本div基本上忽略了其中带有标志的div。

是否有任何解决方案可以通过确保在呈现CSS之前加载图像或者确保div保持在完全相同的位置（即使它们没有任何内容）？

（CSS样本）

div.topbar div.logo{ 
    margin-left: 15%; 
    margin-top: 1px; 
    margin-bottom: 1px; 
    background-image: url("logo.png"); 
    background-repeat: no-repeat; 
    height: 100%; 
} 

div.topbar div.navigation{ 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    margin-left: 25%; 
    font-family: 'Open Sans Light', sans-serif; 
    font-size: 15px; 
    margin-top: 10px; 
}

答

指定width和您的标志容器height。

div.topbar div.logo { 
    /* other stuff */ 
    width: 400px; 
    height: 100px; 
}

答

这就是为什么我们建议在HTML本身指定图像的尺寸的主要原因。

<img width="..." height="..." src="...">

上面的代码将让您的布局完整即使在加载图像和/或CSS文件的延迟。

更多信息：

Should I specify height and width attributes for my IMGs in HTML?

当页面第一次加载时，文本对齐屏幕左侧

相关推荐