2016-08-03 9 views
0

Ich verwende diese Syntax, um zwei Spalten zu erstellen, die links und rechts ausgerichtet sind. Die Syntax funktioniert perfekt!Zentrieren Sie Text über Bild, während Sie die Spaltenausrichtung beibehalten

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

Wie Sie unten den Anruf zu .wrap in der Syntax Weglassen sehen können. Wenn ich den Aufruf zu .wrap in meinem <div> Tags Spaltenstruktur hinzufügen wird zerstört.

Wie kann ich Zentrum Text über meine Bilder und die Spaltenstruktur beizubehalten, die mit dem Aufruf von #bg?

+0

Probleme im Zusammenhang mit der Programmierung und Softwareentwicklung sind nicht Thema, siehe [On-Topic] (https://superuser.com/help/on-topic). Versuchen Sie [SO], aber lesen Sie zuerst [Wie stelle ich eine gute Frage?] (Https://superuser.com/help/how-to-ask). Sie können Ihre Frage markieren und einen Moderator bitten, sie zu migrieren. – DavidPostill

Antwort

0

Sie nicht fügen Sie das Bild mit einem <img> Tag erstellt wird. Fügen Sie es via CSS background Eigenschaft mit Schlüsselwörtern no-repeat center center fixed wie unten hinzu.

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