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입니다. (수정하기 전에 인공 지능의 텍스트를 편집하는 것이 더 좋지만 편집 할 수는 있습니다.)

이것은 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을 사용하고 있습니다. 첫 번째는 오른쪽으로 정렬되고 마지막 하나는 왼쪽으로 정렬됩니다.

두 개의 빈 div는 <ul>으로 채워지고 그 주위에있는 메뉴는 <li> 태그로 채워집니다. 예제에서는 몇 가지 기본 메뉴 항목을 사용합니다.

다음으로 #nav1 ul li:nth-child(1)을 추가하고 다이아몬드에 대해 "홈"인 첫 번째 요소를 배치했습니다. 나는 "Home"을 내가 무엇이든 상상할 수있게 바꿀 수 있으며, 위치는 그대로 유지된다. 이것은 text-align: right이다. 사용중인 많은 항목과 함께이 항목을 추가하고 필요에 맞게 편집하십시오.예를 들어 :

#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; 
} 

이

은 침범하지 않도록 다이아몬드에 걸쳐하지만 약간의 패딩 내 첫 번째, 두 번째 및 세 번째 항목을 밀었다.

시간이 오래 걸리지 만 자유가 충분하고 원하는 효과를 얻었습니다!