divの中央にあるさまざまなサイズの画像を中央に揃える方法

Question

さまざまな画像が水平線で表示されます。画像の中にはサイズが異なるものがありますので、すべての画像が含まれているdivを基準にして中央に表示されるようにしてください。私はそれが現在設定されている方法でなく、これを達成することを望んでいます。これは、一番上のマージンを追加することです。

イメージが変更された場合でも、自動的にこれを含めるdivに相対的にセンタリングされるように、CSSでこれを自動的に行う方法はありますか？

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> 

Answer 1

justify-content: centerとalign-items: centerの親にdisplay: flexを使用すると、行内の子を水平方向および垂直方向に中央に配置します。

とcolsは、サイド・バイ・サイドを表示し適用するために十分なスペースがないときは、次の行にラップする行をしたい場合はflex-wrap: wrapから.row.centered

.row.centered { 
 
    height: 100vh; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="row centered" > 
 
    <div class="col-xs-12 col-sm-4 col-md-2" style=""> 
 
    <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=""> 
 
    <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=""> 
 
    <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=""> 
 
    <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>

Answer 2

あなたはこのように、フレキシボックスを使用することができます：あなたはflexのdisplayプロパティで、あなたは、コンテナを持っていることがわかります

.container { 
 
display: flex; 
 
align-items: center; 
 
background-color: grey; 
 
flex-wrap: wrap; 
 
} 
 

 
.item { 
 
flex-basis: 400px; 
 
flex-grow: 1; 
 
margin: 10px; 
 
height: 200px; 
 
background-color: red; 
 

 
} 
 

 
.item1 { 
 
height: 100px; 
 
}

<div class="container"> 
 
<div class="item item1"></div> 
 
<div class="item item2"></div> 
 
<div class="item item13"></div> 
 
</div>

、および異なる高さの3つのフレックスアイテム。

コンテナのalign-itemsプロパティ（垂直方向の配置に影響する）をcenterに設定すると、高さがどのような場合でも、すべてのフレックスアイテムの中央に配置されます。

これは要素のサイズや数に依存しないため、非常に柔軟な設計です。

こちらがお役に立てば幸いです。