왼쪽 정렬 및 컨테이너 안의 인라인 이미지

Question

내가하려는 것은 이미지가 중앙에 오도록 놓은 다음 다른 이미지가 왼쪽에 정렬 된 인라인입니다. 나는 수색을 시도하고 thats가 맞은 아무것도 찾아 내지 않았다. 어떤 제안이라도 대단히 감사하겠습니다.

HTML

<div class="container"> 
    <header> 
    <div> 
    <a href="index.html"> 
    <img src="left.png" border="0" width="174" height="350" /> 
    <img class="center" src="center.png" border="0" width="700" height="350" /> 
    </a> 
    </div> 

CSS

html 
{ 
    min-height:100%; 
} 
body 
{ 
    background-color: #9CF; 
    background-repeat: no-repeat; 
} 
body,td,th 
{ 
    font-size: large; 
    margin: 3% 5% 3% 5%; 
} 
.container 
{ 
    background-color: rgba(0,0,0,0.4); 
    padding: 6px; 
} 
.linkbg 
{ 
    background-color: #000000; 
    color: #FFF; 
    text-align:center; 
} 
.dashboard 
{ 
    text-align:right; 
} 
ul 
{ 
    background-color: #0099CC; 
    width:100%; 
    text-align:center; 
    list-style-type:none; 
    margin:0; 
    padding:0; 
    padding-top:6px; 
    padding-bottom:6px; 
    opacity:0.7; 
} 
li 
{ 
    display:inline; 
} 
.nava:link,.nava:visited 
{ 
    font-weight:bold; 
    color:black; 
    background-color:##0099CC; 
    text-align:center; 
    padding:6px; 
    text-decoration:none; 
    text-transform:uppercase; 
} 
.nava:hover,.nava:active 
{ 
    background-color: #00FFFF; 
} 
img 
{ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
} 

.center 
{ 
    display:inline-block; 
    margin-left:auto; 
    margin-right:auto; 
} 

Answer 1

다음은이 작업을 수행하는 또 다른 방법은 다음과 같습니다 :

• 는 컨테이너에 text-align: center; 추가 여기
  데모입니다.
• "왼쪽"이미지에 position: absolute; left: 0;을 적용하십시오 ( 클래스를 추가해야 함).
• .container img에 대한 모든 CSS를 제거 할 수 있습니다.

왼쪽 이미지는 절대적으로 배치 되었기 때문에 다른 이미지의 위치에 영향을 미치지 않습니다. 다른 이미지는 컨테이너의 가운데에 정확히 배치됩니다.

Answer 2

당신은

img 
{ 
    max-width: 100%; 
    height: auto; 
    width: auto\9; 
} 

단지와이를 변경이 코드에 문제가

img 
{ 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

,

또한 적용하려는 스타일은 추가 한 복잡성없이 간단히 추가 할 수 있습니다. http://jsfiddle.net/mastermindw/9qAL6/7/

Answer 3

이 내가 페이지의 중간에 사진 부하를 만드는 방법은 아래의 링크 http://bloggingfear.blogspot.in/2012/11/how-to-center-image-using-html-5-code.html

Answer 4

를 확인하실 수 있습니다 전체 검토를 위해 아래 기술

<img style="margin:0px auto;display:block" src="Image URL Here"/> 

를 사용하여 시도 할 수 있습니다

<img src="..." alt=".." style="margin:0px auto;display:block" />