水平对齐图片和文字？

在网页开发中采取婴儿步骤。我有一个应用程序有一个非常类似于this Fiddle的加载器屏幕。水平对齐图片和文字？

在桌面浏览器上，纵向和横向居中（无论如何），文本/图像看起来都可以接受。

但是，当您在较小的屏幕尺寸上查看我的应用程序时，文本/图像开始与屏幕中心水平对齐。

我一直在阅读许多相关的文章和博客，但无法让我的文本/图像保持居中，无论设备宽度如何。这可以通过调整fiddle预览以使其更细化来复制。

<div id="preloader"> 
<div class="preloaderContent"> 
    <div id="loadLabel">Please Wait</div> 
    <img src="http://www.igfa.org/images/throbber.gif"><br> 
    </div> 
</div> 

#preloader { 
    display: table; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    margin:0; 
    padding:0; 
    background:#3399FF; 
    z-index:999; 
} 

.preloaderContent { 
    position: absolute; 
    left: 45%; 
    top: 40%; 
} 

.preloaderContent img { 
    display : block; 
    margin : auto; 
    text-align: center; 
} 

#loadLabel { 
    padding-bottom: 10px; 
    font-size: 30px; 
    font-weight: 300; 
    font-family: 'Segoe UI',Helvetica,Arial,'Sans-Serif'; 
    color: #FFFFFF; 
    text-align: center; 
}

道歉，这是一个有点乱。有人能以我的方式指出错误吗？

来源

2013-04-23 Simon

尝试添加在％ – DiederikEEn 2013-04-23 09:59:28

一个边距，您可以添加％的利润，但我会建议你在我下面提供的是完全肯定的回答工作。 – Aslam 2013-04-23 10:00:56

您需要添加一些响应的CSS。

@media (min-width: 768px) and (max-width: 979px) { ... } 


/* Landscape phone to portrait tablet */ 
@media (max-width: 767px) { ... } 


/* Landscape phones and down */ 
@media (max-width: 480px) { ... }

通过在上述媒体查询中添加特定的CSS，您可以修改每个设备的布局。不要忘记把上面的媒体查询放在你的css下面（为了安全起见）。

希望这可以解决您的问题。

来源

2013-04-23 10:00:07 Aslam

你可以把它放在50％和50％，并添加到这个约一半的内容大小的负边距。

jsfiddle.net/z3zpz/1/

来源

2013-04-23 10:00:37 Jakuje

你希望把这样的事情：

.preloaderContent { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    width: 200px; 
    height: 100px; 
    margin-top: -50px;/*half of height*/ 
    margin-left: -100px;/*half of width*/ 
}

负利润率意味着div的中心是在中心，而不是顶左角。这将根据浏览器窗口大小调整大小。实施例：http://jsfiddle.net/z3zpz/2/

来源

2013-04-23 10:05:56 gaynorvader

尝试这一个

* { margin: 0; padding: 0; } 

html, body { height: 100%; } 

body { position: relative; background: #3399FF; } 

#preloader { display: table; width: 100%; height: 100%; } 

.preloaderContent { display: table-cell; vertical-align: middle; text-align: center; } 

.preloaderContent img { display : block; margin: 0 auto; } 

#loadLabel { padding-bottom: 10px; font-size: 30px; font-weight: 300; font-family: 'Segoe UI', Helvetica, Arial, 'Sans-Serif'; color: #FFFFFF; }

来源

2013-04-23 11:56:47

还可以尝试如果高度和内容宽度（.preloaderContent）是已知的这一个。

html, body { height: 100%; } 

#preloader {position: relative; background: #3399FF; width: 100%; height: 100%; } 

.preloaderContent { position:absolute; height:100px; width:160px; top:50%; left:50%; margin-top:-50px; margin-left:-80px; }

来源

2013-04-23 12:03:56

水平对齐图片和文字？

回答

相关问题