HTML5 - img 정렬 센터가 작동하지 않습니다.

내 프로필 사진을 내 웹 페이지 중간에 정렬하려고했지만 아직 작동하지 않는 것 같습니다. 나는 두 가지 모두 align = "middle"& float 메소드를 시도했지만 여전히 왼쪽 사이드를 떠나기를 거부합니다.HTML5 - img 정렬 센터가 작동하지 않습니다.

내가 사용하려고했습니다 코드 (HTML5)이 어떤 도움을 주시면 감사하겠습니다

<header> 
     <h1> Luke Johnson Portfolio</h1> 

     <div class="image-cropper" style="text-align"> 
      <img src="lukeprofile.jpg" align="center" alt="Luke Profile Pic" class="rounded" /> 

     </div> 
</header>

, 감사합니다.

출처

2017-10-08 LukeJ

align 이미지의 속성이 웹 페이지의 텍스트 또는 다른 이미지에 상대적으로 일치합니다 (자세한 정보는 https://www.w3schools.com/tags/att_img_align.asp).

예고 (W3 스쿨에서 정보) :

가. "HTML5에서 지원되지 않습니다의 정렬 속성 대신 CSS를 사용합니다."

그래서 align 귀하의 경우 트릭을 할 수 없습니다 속성, 당신은 사용하여 이미지 위치를 지정할 수 있습니다 :

img { 
    display: block; 
    margin: 0 auto; 
}

대신.

img { 
 
    display: block; 
 
    margin: 0 auto; 
 
}

<header> 
 
    <h1> Luke Johnson Portfolio</h1> 
 
    <div class="image-cropper" style="text-align"> 
 
    <img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="Luke Profile Pic" class="rounded" /> 
 
    </div> 
 
</header>

출처

2017-10-08 01:27:20

@LukeJ, 환영합니다 –

고맙습니다! 회신에 늦어서 죄송합니다. 도움을 주신 모든 분들께 감사드립니다. – LukeJ

당신은 인라인 스타일 태그를 오용 한 같은 것 적절한 사용은 다음과 같습니다 나는 웹 사이트에 URL이 있다면

<div class="image-cropper" style="text-align: center"> <img src="lukeprofile.jpg" alt="Luke Profile Pic" class="rounded" /> </div>

내가 더 당신을 도울 수 있습니다.

출처

2017-10-08 01:26:11

호환성 노트 IMG 태그의 정렬 속성 HTML5에서 지원되지 않는 다음은 예이다. 대신 CSS를 사용하십시오.

중간, 위쪽 또는 아래쪽으로 이미지를 정렬하려면 CSS 속성을 사용하십시오.

출처

2017-10-08 01:28:29

HTML5 - img 정렬 센터가 작동하지 않습니다.

답변

관련 문제