Positionierung von Titeln und img

Wie positioniere ich "mean design" auf dem Logo und der Beschreibung unter dem Logo? das Ganze soll Mitte vertikal und horizontalPositionierung von Titeln und img

Es sieht aus wie das jetzt

Heres der Code jetzt

.title { 
 
    text-align: center; 
 
    position: absolute; 
 
    color: white; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 

 
#logo { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    width: 350px; 
 
}

<div class="cover-wrapper"> 
 
      <div class="title"> 
 
      <h1 id="mean">Mean Design.</h1> 
 
      <img class="img-responsive" id="logo" src="MeanDesignLogo.png"> 
 
      <h6 id="des">ui/ux • web design • graphic design • illustration</h6> 
 
       </div> 
 
</div> <!-- cover wrapper -->

Quelle

2016-06-23 Chicky Egg

was dein Problem ist? Ich weiß, dass Sie das getan haben, ändern Sie einfach die Schriftfarbe und sehen Sie. https://jsfiddle.net/#&togetherjs=9fg9wF2xQi –

@Charles_R Sehen Sie die bearbeitete Frage, danke –

versuchen Sie dies, setzen ** display: block; ** für jedes Element –

Versuchen Sie, so etwas zu bekommen?

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.title { 
    text-align: center; 
    position: absolute; 
    color: white; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    background-image:url(MeanDesignLogo.png); 
    background-repeat:no-repeat; 
    background-size:100% 100% 
} 

.title2 { 
    text-align: center; 
    position: absolute; 
    color: black; 
    top: 449px; 
    left: 592px; 
    transform: translate(-50%, -50%); 
} 

#logo { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    width: 350px; 
} 
</style> 
</head> 
<body> 
<div class="cover-wrapper"> 
    <div class="title"> 
      <h1 id="mean">Mean Design.</h1> 
<h6 id="des"></h6> 
    </div> 
    <div class="title2"> 
    <h6 id="des">ui/ux • web design • graphic design • illustration</h6> 
    </div> 
</div> <!-- cover wrapper --> 
</body> 
</html>

Quelle

2016-06-23 06:49:42

Sie haben nur alle die CSS in #logo zu entfernen:

.title { 
 
    text-align: center; 
 
    position: absolute; 
 
    color: black; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
}

<div class="cover-wrapper"> 
 
      <div class="title"> 
 
      <h1 id="mean">Mean Design.</h1> 
 
      <img class="img-responsive" id="logo" src="http://placehold.it/200x50?text=LOGO"> 
 
      <h6 id="des">ui/ux • web design • graphic design • illustration</h6> 
 
       </div> 
 
</div> <!-- cover wrapper -->

Quelle

2016-06-23 07:56:53 blonfu

Positionierung von Titeln und img

Antwort

Verwandte Themen