3 개의 이미지를 같은 행에 정렬하고 싶습니다. 첫 번째 이미지는 페이지의 왼쪽, 세 번째 이미지는 페이지의 오른쪽, 두 번째 이미지는 첫 번째 및 세 번째 이미지의 정확한 중앙에 정렬되어야 합니다.
아래 코드를 시도했지만 내가 원하는 방식으로 재생되지만 3 개의 이미지를 다른 2 개의 이미지의 중앙에 정확히 배치 된 2 번째 이미지와 정렬하는 방법은 무엇입니까?
<div>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/>
</div>
<style type="text/css">
#content {
width:50%;
margin-left: auto ;
margin-right:auto ;
}
옵션 1:
이미지를 div 안에 넣는 대신 각 이미지를 스팬 안에 넣습니다.
첫 번째 이미지와 두 번째 이미지를 왼쪽으로 띄웁니다.
두 번째 이미지에 약간의 왼쪽 패딩을 줍니다.
오른쪽 이미지를 오른쪽으로 띄웁니다.
이미지와 함께 플로트를 사용하면 몇 가지 부작용이 있으므로 항상 모든 이미지의 부모
overflow:hidden
을 추가하는 것을 잊지 마세요.
옵션 2(선호):
이렇게 하면 표의 정확한 너비에 대한 걱정 없이 두 번째 이미지가 항상 중앙에 정렬되도록 하는 가장 좋은 방법입니다.
아래와 같이 말이죠:
<table width="100%" border="0">
<tr>
<td><img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" /></td>
<td><img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" /></td>
<td><img src="@Url.Content("~/images/image3.bmp")" alt="" align="right"/></td>
</tr>
</table>
다음과 같이 답해야 합니다.
<div align="center">
<img src="@Url.Content("~/images/image3.bmp")" alt="" align="right" style="float:right"/>
<img src="@Url.Content("~/images/image1.bmp")" alt="" align="left" style="float:left" />
<div id="content" align="center">
<img src="@Url.Content("~/images/image2.bmp")" alt="" align="center" />
</div>
</div>
첫 번째 DIV가 #content
라고 가정했습니다:
<div id="content">
<img src="@Url.Content("~/images/image1.bmp")" alt="" />
<img src="@Url.Content("~/images/image2.bmp")" alt="" />
<img src="@Url.Content("~/images/image3.bmp")" alt="" />
</div>
그리고 CSS 입니다:
#content{
width: 700px;
display: block;
height: auto;
}
#content > img{
float: left; width: 200px;
height: 200px;
margin: 5px 8px;
}