在保持列對齊的同時對圖像進行中心文本

我正在使用此語法創建左列對齊的左列對齊右列的兩列。語法完美！在保持列對齊的同時對圖像進行中心文本

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
    html {height:100%;} 
    body {height:100%; margin:0; padding:0;} 
    #bg {position:fixed; top:0; left:0; width:100%;z-index:-1; height:100%;} 
    #content {position:relative; z-index:1;} 
</style> 
<style type="text/css"> 
.wrap { 
    width: 1060px; 
    height:auto; 
    margin: auto; 
    text-align:center; 
    position:relative; 
} 
.text_over_image { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left:0; 
    right:0; 
    bottom:0; 
    color:#fff; 
    height:100px; 
} 
</style> 

</head> 

<body> 
<div id="bg"> 
<img src="C:Image1.jpg" width="100%" height="100%" alt="1stDay" /> 
</div> 
<div> 
    <span style="float: left;"> 
    <font size="30" color="red">Text1</font><br>  
    <img src="C:\1.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
    <span style="float: right;"> 
    <font size="30" color="red">Text2</font><br>  
    <img src="C:\2.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
</div> 
<div style="height: 650px;"></div> 
<div> 
    <span style="float: left; clear:both"> 
    <font size="30" color="red">Text3</font><br>  
    <img src="C:\3.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
    <span style="float: right;"> 
    <font size="30" color="red">Text4</font><br>  
    <img src="C:\t.jpg" alt="" style="width:425px;height:500px;"> 
    </span> 
</div> 
<div style="height: 650px;"></div> 
</body> 
</html>

正如你可以看到省略調用.wrap按照下面的語法。如果我將.wrap添加到我的<div>標記列結構中被破壞。

我怎樣才能居中文字在我的圖像，並保持與該調用創建#bg?

來源

2016-08-03 BoJack Horseman

特定於編程和軟件開發的問題是無關緊要的話題，請參閱[On-Topic]（https://superuser.com/help/on-topic）。嘗試[所以]，但請首先閱讀[我如何問一個好問題？]（https://superuser.com/help/how-to-ask）。您可以標記您的問題，並請管理員遷移它。 – DavidPostill

請勿與<img>標籤添加圖像列結構。添加它通過CSS background財產與關鍵字no-repeat center center fixed像下面。

background: url(../media/pic.png) no-repeat center center fixed;

來源

2016-08-04 01:58:57

在保持列對齊的同時對圖像進行中心文本

回答

相關問題