我在水平线上有各种图像。有些图片大小不同,所以我希望所有图片都相对于它们所包含的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) –