佈局HTML CSS圖片和標題

-3

<h2> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;" /> WELCOME WELCOME WELCOME 
 
    <br> Welcome Welcome Welcome 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" " /> 
 
</h2>

最重要的部分是布點

來源

2017-04-12 keronconk

如果您將提供您的努力和代碼示例以實現您希望人們在這裏可以更好地幫助您。 :) – Chirag

您可以通過以下方式輕鬆實現。

<div style="width: 90px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
 
</div> 
 

 
<div style="width: 400px; display: inline-block; color:#F0E68C"> 
 
    <h2 style="text-shadow: 3px 3px 10px black; font-style: italic;"> 
 
    WELCOME WELCOME WELCOME 
 
    <br > 
 
<div style= " margin-left:50px;"> 
 
    Welcome Welcome Welcome 
 
</div></h2> 
 
</div> 
 

 
<div style="width: 90px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
 
</div>

希望它能幫助。

來源

2017-04-12 05:28:50 Chirag

您需要將CSS添加到您的標記。請檢查下面的片段並根據您的需要進行編輯。

h2{ 
 
    display: inline; 
 
} 
 
h4{ 
 
    margin-left: 150px; 
 
}

<img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
 

 
<h2>WELCOME WELCOME WELCOME</h2> 
 
     
 

 
     <img src="https://i.stack.imgur.com/am4hM.png" alt=""/> 
 
<h4> Welcome Welcome Welcome</h4>

來源

2017-04-12 05:05:39 DragonBorn

有相當多的錯誤的代碼片斷您提供，你所希望的。雖然我認爲這將是一個好主意，讓更多的深入與你的問題，並詳細說明你已經嘗試什麼，你的要求，還有一些作品，我們可以

Div的工作是CSS元素有助於分割內容。當涉及到佈局時，它們非常有用。在你的案例中使用三個div可能是有意義的。每個圖標一個，文本另一個。

<div> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
</div> 

<div> 
    WELCOME WELCOME WELCOME 
    <br> 
    welcome welcome welcome 
</div> 

<div> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
</div>

但是這仍然看起來很糟糕吧？對。我們需要告訴這些divs的行爲，也許有些對齊？

這個怎麼樣：

<div style="width: 100px; display: inline-block"> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
</div> 

<div style="width: 100px; display: inline-block"> 
    WELCOME WELCOME WELCOME 
    <br> 
    welcome welcome welcome 
</div> 

<div style="width: 100px; display: inline-block"> 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
</div>

好一點..但寬度都錯了！更改中間的div爲400px ..它越來越好！讓我們添加這些標題和一些顏色。

<div style="width: 100px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style="margin-top: 20px;"/> 
 
</div> 
 

 
<div style="width: 500px; display: inline-block; color:#F0E68C"> 
 
    <h2> 
 
    WELCOME WELCOME WELCOME 
 
    <br> 
 
    welcome welcome welcome 
 
    </h2> 
 
</div> 
 

 
<div style="width: 100px; display: inline-block"> 
 
    <img src="https://i.stack.imgur.com/am4hM.png" alt="" style=" "/> 
 
</div>

八九不離十！ theres仍然有一些工作，但你需要陰影，更好的字體，居中的文字。獲取瀏覽谷歌，你會立即解決它！也許甚至爲你的造型製作一個獨立的文件！

來源

2017-04-12 05:12:42 Scheme

佈局HTML CSS圖片和標題

回答

相關問題