Saya memiliki sebuah img
di div (class="top_image"
) dan saya ingin gambar ini berada persis di tengah-tengah div tapi tidak, saya mencoba bekerja...
Terima kasih untuk bantuan!
Setiap solusi yang diposting di sini mengasumsikan bahwa anda tahu ukuran anda img
, yang tidak skenario umum. Juga, penanaman dimensi ke dalam larutan adalah menyakitkan.
Hanya mengatur:
/* for the img inside your div */
display: block;
margin-left: auto;
margin-right: auto;
atau
/* for the img inside your div */
display: block;
margin: 0 auto;
Yang's semua.
Catatan, bahwa anda'll juga telah menetapkan awal min-width
untuk luar div
.
text-align: center hanya akan bekerja untuk horizontal centering. Untuk itu harus di lengkapi center, vertikal dan horizontal anda dapat melakukan hal-hal berikut :
div
{
position: relative;
}
div img
{
position: absolute;
top: 50%;
left: 50%;
margin-left: [-50% of your image's width];
margin-top: [-50% of your image's height];
}
Yang sangat sederhana dan elegan solusi untuk ini disediakan oleh W3C. Hanya menggunakan margin:0 auto deklarasi sebagai berikut:
.top_image img { margin:0 auto; }
Informasi lebih lanjut dan contoh dari W3C.
<div class="outer">
<div class="inner">
<img src="http://1.bp.blogspot.com/_74so2YIdYpM/TEd09Hqrm6I/AAAAAAAAApY/rwGCm5_Tawg/s320/tall+copy.jpg" alt="tall image" />
</div>
</div>
<hr />
<div class="outer">
<div class="inner">
<img src="http://www.5150studios.com.au/wp-content/uploads/2012/04/wide.jpg" alt="wide image" />
</div>
</div>
CSS
img
{
max-width: 100%;
max-height: 100%;
display: block;
margin: auto auto;
}
.outer
{
border: 1px solid #888;
width: 100px;
height: 100px;
}
.inner
{
display:table-cell;
height: 100px;
width: 100px;
vertical-align: middle;
}
Ini butuh waktu terlalu lama untuk mencari tahu. Saya dapat't percaya tidak ada yang telah disebutkan di pusat tag.
Ex:
<center><img src = "yourimage.png"/></center>
dan jika anda ingin mengubah ukuran gambar untuk persentase:
<center><img src = "yourimage.png" width = "75%"/></center>
GG Amerika