DIV 내에서 가운데 ​​맞춤 이미지

Question

이 질문은 전에 질문했지만 내 문제는 조금 다릅니다. 나는 두 개의 이미지가있는 div를 가지고 있습니다. 첫 번째 이미지는 왼쪽 정렬로 유지해야하며 두 번째 이미지는 가운데 맞춤이 필요합니다. div에는 고정 된 너비가 없으므로 제목을 덮습니다. 나는 here 찾을 수있는 바이올린을 만들었습니다.

어떤 제안이 나에게 도움이 될 것입니다.

Answer 1

케이스

1 사업부 클래스에 text-align:center를 추가합니다.

의사 클래스를 사용하여 첫 번째 이미지에 float:left을 입력하면 두 번째 이미지가 div에 가운데 정렬되고 첫 번째 이미지는 왼쪽 정렬됩니다. 여기

2

가 케이스 (1)에 position:absolute

.brandLogo { 
    margin: 15px; background-color:red; text-align:center; position:relative; 
} 

a img:first-child { 
    border: 0 none; position: absolute; left:0; 
    height: auto; 
    vertical-align: middle; 
} 
img { 
    border: 0 none; margin:0 auto !important; 
    height: auto; 
    vertical-align: middle; 
} 

데모 http://jsfiddle.net/Eevpc/11/

하여 수행 데모 http://jsfiddle.net/Eevpc/5/

경우와, 두 번째 이미지는 나머지 폭 중심 div의 (th가 차지하는 공간을 무시함) 첫 번째 이미지).

두 번째 경우에는 두 번째 이미지가 원본 div 너비의 정확한 가운데에 정렬됩니다.

Answer 2

이 시도 :이 작동

<div id="main" style="text-align:center; width:100%;"> 
    <div id="left" style="float:left;"> 
    <img src="..." alt="..."/> 
    </div> 
    <div id="right" style="float:right; width:100%; text-align:center;"> 
    <img src="..." alt="..." style="margin:0 auto;" /> 
    </div> 
    <div style="clear:both; content:'.'; display:none" /> 
</div> 

Answer 3

희망을.

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

감사