定位標題和img

我如何將「平均設計」定位在徽標頂部和徽標下面的描述？整個事情應該是中心垂直和水平定位標題和img

現在看起來像這樣

繼承人現在

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

來源

2016-06-23 Chicky Egg

你有什麼問題？我已經做到了，只需更改字體顏色即可。 https://jsfiddle.net/#&togetherjs=9fg9wF2xQi –

@Charles_R看到編輯的問題，謝謝 –

試試這個，把**顯示：塊; **爲每個元素 –

代碼你試圖讓這樣的事情？

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

來源

2016-06-23 06:49:42

你只需要刪除所有的CSS在#logo：

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

來源

2016-06-23 07:56:53 blonfu

定位標題和img

回答

相關問題