saya ingin menyelaraskan 3 gambar dalam baris yang sama dalam div, gambar pertama harus disejajarkan di sebelah kiri halaman, gambar ketiga harus disejajarkan di sebelah kanan halaman dan gambar ke-2 harus disejajarkan di tengah-tengah gambar pertama dan ke-3
mencoba kode di bawah ini tetapi tidak sesuai dengan yang saya inginkan, bagaimana cara menyelaraskan 3 gambar dengan gambar ke-2 ditempatkan tepat di tengah 2 gambar lainnya?
<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 ;
}
Opsi 1:
Alih-alih meletakkan gambar di dalam div, letakkan masing-masing gambar di dalam rentang.
Mengapung gambar pertama dan kedua ke kiri.
Berikan padding kiri ke gambar ke-2.
Mengapung gambar kanan ke kanan.
Selalu ingat untuk menambahkan overflow:hidden
ke dalam induk
Opsi 2 (Lebih disukai):
Ini akan menjadi cara terbaik untuk memastikan gambar ke-2 selalu sejajar di tengah tanpa mengkhawatirkan lebar tabel yang tepat.
Seperti di bawah ini:
<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>
Ini harus menjadi jawaban Anda
<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>
Saya mengasumsikan DIV pertama adalah #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>
Dan CSS:
#content{
width: 700px;
display: block;
height: auto;
}
#content > img{
float: left; width: 200px;
height: 200px;
margin: 5px 8px;
}