2016-08-24 2 views
0

이것은 아마도 쉬운 대답 일 수 있지만 페이지 중간에 앉아 있어야하는 이미지는 약간 희박하여이며 나에게 많은 자극을줍니다.이미지 중앙에 넣기

HTML :

</section> 
 

 
<section class="img_section"> 
 
<div> 
 
    <img src="images/menu.jpg" alt="menu" align="center"> 
 

 

 
    </div> 
 
</section>

CSS :

img section{ 
 
\t float:center; 
 
\t text-align:center; 
 
}

내가 플로트를 제거하고, 섹션 엔트 밖으로 복용 시도했습니다

irely,하지만 이 아닙니다.

도움이 될 것입니다.

+1

을 중심으로에 대한

margin: 0 auto; 

를 사용하려면

<center> <section> <div> <img src="images/menu.jpg" alt="menu" align="center"> </div> </section> </center> 

답변

1

답변이 간단합니다.

#div1 { 
 
    text-align: center; 
 
}
</section> 
 

 
<section class="img_section"> 
 
    <div id="div1"> 
 
    <img src="images/menu.jpg" alt="menu" align="center"> 
 
    </div> 
 
</section>

text-align: center; 속성을 중심으로 div 내부의 모든 요소를 ​​만드는 것입니다. 또한 특정 클래스 또는 ID를 사용하여 div을 선택하는 것이 좋습니다. 이것은 페이지의 모든 div 요소로 이동합니다. CSS에서

+1

이 솔루션은 전체 페이지의 텍스트와 이미지를 가운데에 배치합니다. 자세한 내용은 .img_section 클래스를 추가해야합니다. – Chico3001

+0

예, 정확합니다. 스타일을 지정하기 전에 'div'에 특정 클래스 또는 ID가 있으면 더 좋습니다. –

0

시도 :

.img_section img{ 
    text-align:center; 
} 

HTML :

<section class="img_section"> 
    <img src="images/menu.jpg" alt="menu" align="center"> 
</section> 
2

float: center; 또한 img section 같은 건 섹션 내 스타일 이미지가 없습니다 없습니다. 당신은 시도 할 수 중 하나 1 :

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

2 : 다른 스타일

+0

작동하지 않습니까? –

+0

당신은 .img_section을 위해 어떤 다른 스타일을 사용합니까? – LorDex

+0

img 섹션 { \t display : 블록; \t 여백 : 0 자동; \t 텍스트 정렬 : 가운데; } 섹션 img { 디스플레이 : 인라인 블록; } –

0

이 훨씬 더 간단에 따라

section div { 
text-align: center; 
} 
section div img { 
display: inline-block; 
} 

. 센터 : 나는 그냥 참고로 플로트 같은 것은 없다

+0

'center' 태그는 몇 년 동안 사용되지 않습니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center –

+0

예. Chrome에서 작동합니다. 이 정보를 공유해 주셔서 얼마나 유감 스럽습니까? – Aravind

0

로 단지 센터 태그를 포함한다. 그것은 단지 왼쪽, 오른쪽 또는 전혀 없습니다.
관련 문제