我在水平線上有各種圖像。有些圖片大小不同,所以我希望所有圖片都相對於它們所包含的div居中,所以看起來更好。我希望能夠實現這個目標,而不是目前設置的方式,即添加頂部邊距。如何在div中間放置不同尺寸的圖像
有沒有辦法在css中自動執行此操作,以便如果圖像發生更改,它們仍會相對於包含div而居中?
https://jsfiddle.net/0aqavqtL/
<div class="row" style="text-align: center; margin: 30px 0; width: 100%;">
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com/" target="_blank"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAAQlBMVEX0TiT/uQIBpO+BuQD////0SRz/tAD5/v/2d17//PRStvIAou/7/PR2tACbx1L//vkAne7/rwBAsfH0RRGUw0D4lIKWmv8+AAABF0lEQVR4nO3P2Q3CQBQEwQVsY+47/1T5gw0ADXpWdQKtai3VOA+fjqdNqpgPEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBDwl8Ax1eNPwDnWqwM+z6nasPAAqwdYPcDqAVZv+cBtrm57idWuse5f3+42pWrrVId9B5xWqQABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBASsC30hhhGitFNxPAAAAAElFTkSuQmCC"></a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com/" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAMAAAC8EZcfAAAAZlBMVEUFBwj///8AAACnp6cAAwTDw8P09PRRUlPu7u5HSEgAAAOsra0QEhP6+vpTVFU5Ojt5enoXGRrKyssdHx80NTbZ2dnh4eG4ublNTk6foKAqLCyRkpJ2d3hcXV19f3/q6uokJihlZma9e7nrAAABDElEQVR4nO3Zy07DMBBGYXtqkjYlaQmtQ6Gk9P1fEki4lcsCzSJ/pPMtvD6ajS1PCAAAAAAAAAAAAAAAAIA8G02d8Zdkm6Z8saumLvldZY/74tVBc4SVHXMcLCQDzR7qqBuY7L6LUTcwWdlG5UA756gcaMciKgfa6qJPMXA5j8B2rx3YPV0pB9YHM+XAU2/KgUU+myXdwLLdWAq6gel2eKPqBoaUhlM3cESgF4FeBHoR6EWgF4FeBHoR6EWg15wC09QtPw3rh49AwVVE02+3/dvnUe669U6rsLpexwvFSjxwSeD/EOg1g8BFXXyVxQJDGBex75q7G7XLxL5R6wMAAAAAAAAAAAAAAAA+PQM59QqnSlPNowAAAABJRU5ErkJggg=="></a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/en/e/ef/Dots_video_game_cover.png"></a>
</div>
<div class="col-xs-12 col-sm-4 col-md-2" style="margin: 15px 0; text-align: center; display: inline-block; vertical-align: middle;">
<a href="http://example.com" target="_blank">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOAAAADgCAMAAAAt85rTAAAA+VBMVEX///8Apmj/1AEAf8TtGUH80gDl5OPu7e63r7TuFT/m5ugSf7/rADnn6OiqsbEUo2uzrazlI0YAoHQAiMgAl2Dj0DutqavlPEobfsUvlWEVkV34AD8AombhDE//2AAAf8Ijgrj99e/qxjlEi6rjvBW4q4PEs3s5pGvU09fXsh7Hx8vu+vkAcr2+t0kAcrWgpWDVxjGvssHpyTHK1d0Ad8kAr2vQN0bfQlixvr3CyMg9g1n/zAAtilvgswDuvgBBiKqku8qVsbpPhFqZmqusS0u3O0XDNEUAZ7bQHUDFJkCqPEfS3uXh3tbGs2byzxTtyygAbcy6tU22uIhH/tAJAAADWklEQVR4nO3dfVfSUBzAcWMTZTZ12cNMY5RmZlD5WJalPWnPWe//xQSCjObAu7Ur9/72/f7BcR447HPuNsY2YGKCiIiIiIiIqBxNeb7ve2f53b/601480b71z/NGFt+h85gpvan4JnX24MY1jc1tKAi9yYq+6pqB09UxAysAAQIECBAgQIAAAQIECLCUQN7wAgQIECDAEYl/mRAPFL+IAgQIECBAgAABAgRoEXB3VzJw+fhLu6+qRguBn4MgcI8lA13XrUkHCh/BWs2yEZzL1Ke9dh8tAm59uJ2pTONtBHCzmuX61nULgf7lsxBXtRDoAQQIECDAsgLrAwkE1reexW0NA1r8Ql9vnTw976SVPoR2j2CrGXVy2jWFAp2zolFAqxfRHnDkCAoB7pQXKGEdLANQ/DooHRjJBP4+3TnvtFVP7ZfNwMrP53E/HqY3rfJJcFOBlXixrK9trqemMAcGAweoaxuZJAABAgQIECBAgAABAgQIECBAgABlA28V0p/9J4kuPtX9S/v+KFsqQP9eIQVu51LWXp3rkoP95BHRb2H3bLDj9E4LR1H/DHFvwgnbnd0oNTOvArxeU2lw/tPv0GHF1YLZ5JNvx6cyCkoR6OooEzCSDszbmIHJU5+mA5NrWf/fw4Drnlf1B7Y026HhwLuZerXUecyLgW2p8cCby1k66AJfxucHzQdm2ssQD1y8CDR9I5MPOLAOigS+2+531EhvxmbgnYWwGYbNdmGz8Ti1N4dK62ba3o4RwP7chI3V1G+Lf72Se+NjFtBprPbeO/77TrIiDpgMIEAzgCFAy4HiF9FhwEkpwGGLKMBSAruHU2UARxxTtAMoZitaWiAbmdQie4D5FlGLgGIWUfG7auKBYeNtJe3TP2JeJpzocCW1XMdFDdrIxLtaQ8605x0/U4B6MmgENQYQIECAAAECBAgQIEA7gAeLWXp/OTDvhb6agO5StlzbRjBPAAECBGgJMNJ/OeV4gVdwveiYgWkBBHhFQBs/fQawVMC8AQQIECBAgAABAtQB/O+j2qYDCwkgQIAALwIL2X4CZBHVAixw8MwEFh1A24BRYkocMFmRX/2XM61Axe82DHS2tzCjMxXg1P6szua1tqHym0BZfozbuBR8REREREREVIb+AtF2M2YGUTpkAAAAAElFTkSuQmCC"></a>
</div>
</div>
這是完美的!謝謝! – penmas
你知道我將添加什麼規範來允許這種對齊轉移到Mozilla和Safari嗎?我注意到它沒有在那裏工作。 – penmas
@penmas應該在最新版本中正常工作。我剛剛檢查了FF和safari,看起來像預期的。如果您使用的是舊版本,則可能需要使用瀏覽器前綴。我相信這只是'display:-webkit-flex','-webkit-align-items:center'和'-webkit-justify-content:center'(用'moz'替換'webkit'爲ff) –