CSS 태그는 페이지 중앙에 표시되지 않습니다

Question

저는 CSS 초보자이며 DRUPAL (CMS)을 사용하여 내 사이트를 디자인하고 있습니다. 나는이 태그를 사용하여 이미지의 중심을 할 수 있었다 :

#block-imageblock-4{ 
    width:25.5%; 
    height:10%; 
    text-align:center; 
    margin-top:1%; 
    margin-bottom:1%; 
    margin-left:37%; 
    margin-right:36.5%; 
} 

이 경우 화면 해상도는 1366px768px (최대 #page) 또는 페이지의 중앙에 큰 # 블록 imageblock-4 체류입니다.

다른 페이지에서 볼 수 있음 두 개의 태그가있는 두 개의 이미지가 있습니다. 이 CSS를 나란히 배치했습니다.

#block-imageblock-17,#block-rotating-banner-1{ 
    display:block; 
    width:auto; 
    margin-left:2%; 

} 

가 각각의 태그 :

#block-imageblock-17{ 
    width:15%; 
    float:left; 
    margin-top:1%; 
    margin-left:3%; 
    margin-right:1.5%; 
    margin-bottom:5%; 
} 

#block-rotating-banner-1 { 
    margin-right:-30%; 
    margin-top:1%; 
    margin-bottom:10%; 
    float:left; 
    background-repeat:no-repeat; 
    width:26%; 
    height:180px; 
    max-width:100%; 
    min-height:100%; 
    background-image:url("/sites/default/files/imgs/ArtistFrame.png"); 
} 

하지만 화면 해상도가 다음 이미지가 중앙에 있지 768px에 의해 1366px보다 큰 경우. 그리고 그게 내 문제 야.

내가 발견 한 것을 나는 두 태그 중 모든 플로트와 여백을 꺼내이 같은 두 요소를 넣을 경우 :

#block-imageblock-17,#block-rotating-banner-1 { 
    display:block; 
    width:auto; 
    text-align:center; 
    margin-top:1%; 
    margin-bottom:1%; 
    margin-left:37%; 
    margin-right:36.5%; 
} 

두 이미지가 집중되어,하지만 서로 옆에 없습니다.

두 이미지를 나란히두고 페이지 중앙에있는 태그 #block-imageblock-4과 같은 제안 사항이 있으십니까?

Answer 1

<div> 태그로 이미지를 배치하고 margin: 0 auto;을 사용하여 div의 중심에 배치합니다. 이

CSS

.centerDiv { margin: 0 auto;} 

HTML

<div class="centerDiv"> 
<img src="urlhere" /> 
... 
</div> 

Answer 2

같은 뭔가이 시도 :

img { 
    height: 250px; 
    left: 50%; 
    margin-top: -125px; 
    margin-left: -125px; 
    position: absolute; 
    top: 50%; 
    width: 250px; 
} 

및 자세한 내용은 여기 :

http://www.paulund.co.uk/absolute-center-images-with-css

Answer 3

div 
{ 
    margin: 0 auto; 
    width: 100px; 
} 
img 
{ 
    width: 100px; 
} 

"여백 : 0 자동;"이있는 요소의 너비 은 너비를 명시 적으로 정의해야합니다. JSFiddle