CSS將圖像包裹在圖像上

Question

我想讓我的圖像浮在div的中心。當前代碼：

<style type="text/css"> 
    #navig { 
     height: 333px; 
    } 

    #navig img { 
     display: block; 
     margin: 0px auto; 
    } 
</style> 
<div id="navig"><img src="images/logo.png" height="333" id="logo" /></div> 

麻煩的是圖像是鑽石，我想文字環繞鑽石的縮進。我相信這是一個<img align='center' />可能性，但這個是在HTML 4.01棄用，甚至沒有在HTML 5

我嘗試了好幾種可能性的支持，我還是不能讓文字圍繞鑽石正確換行。

Answer 1

你不能只用一個圖像。 但是你可以使用圖形，看看這個頁面：

http://www.csstextwrap.com/

希望這有助於。

Answer 2

請參考這裏的一些選項。我有兩個選項，CSS-Shapes和SVG。

最好的選擇當前是使用SVG圖像，但一定要使用SVG代碼，而不是將其鏈接爲圖像。

這是一個JSFIDDLE，您可以看到文本可以突出顯示並且可以進行編輯。 （更多編輯的痛苦，儘可能使用AI中的文字保存，但仍然可以編輯）

這也非常靈活，你可以在這個FIDDLE中看到。

這是一個非常新的功能，並沒有很好的瀏覽器支持。

SO CSS-Shapes

一旦此，

shape-outside: polygon(50px 0px, 100px 100px, 0px 100px); 

支持，你將能夠輕鬆地做到這一點。

我推薦學習基礎知識，以便在大多數當前瀏覽器支持它之後，您已經知道該怎麼做。

Answer 3

我設法弄清楚了一個手動的方法。圖像仍然在div中，並被另外兩個封閉的div標籤包圍。

<div id="navig"> 
    <div id="nav1"></div> 
    <div id="nav2"><img src="images/logo.png" height="333" id="logo" /></div> 
    <div id="nav3"></div> 
</div> 

然後我要確保這三個浮動左：#navig div {float:left;}和兩個空的div使用text-align。第一個將右對齊，最後一個對齊左邊。

然後用<ul>填充兩個空白div，我想要的菜單填入<li>標籤。對於這些例子，我將使用一些基本的菜單項。

<div id="navig"> 
     <div id="nav1"> 
      <ul> 
       <li>Home</li> 
       <li>About</li> 
       <li>Contact</li> 
      </ul> 
     </div> 
     <div id="nav2"> 
      <img src="images/logo.png" height="333" /> 
     </div> 
     <div id="nav3"> 
      <ul> 
       <li>Products</li> 
       <li>Shipping</li> 
       <li>Legal</li> 
      </ul> 
     </div> 
    </div> 

然後我添加了#nav1 ul li:nth-child(1)，並定位了第一個元素，這個元素是對着鑽石的「家」。我可以將「家」改成我想象中的任何東西，並且這個位置仍然被強制爲text-align: right。將這些添加到您正在使用的衆多<li>項目中，並對其進行編輯以滿足您的需求。例如：

#nav1 ul li:nth-child(1) { 
    position: relative; 
    left: 48px; 
} 

#nav1 ul li:nth-child(2) { 
    position: relative; 
    left: 24px; 
} 

#nav1 ul li:nth-child(3) { 
    position: relative; 
    left: 8px; 
} 

這就推動了我的第一次，第二項和第三項在鑽石但有一點填充以便不打擾。

有點漫長的過程，但有很大的自由度，給了我想要的效果！