如何使一行圖像垂直和水平居中div？
[英]How to make a row of images a vertically and horizontally centered div?
問題描述
我正在嘗試以任何屏幕尺寸在頁面上居中放置一行圖像。
.content img { width: 30%; height: auto; } .content { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); }
<body class="body_background"> <div class="content"> <a href="/index.html"> <img src="http://lorempixel.com/400/200/"></img> </a> <a href="/index.html"> <img src="http://lorempixel.com/400/200/"></img> </a> <a href="/index.html"> <img src="http://lorempixel.com/400/200/"></img> </a> </div> <!-- video --> <div class="container"> <video autoplay loop muted> <source src="background.mp4" type="video/mp4"> </video> </div> </body>
圖像當前在Y方向上居中。 除非我使用text-align：center，否則它們不在x的中心，但是邊距不均勻。
2 個解決方案
解決方案1
2 2019-06-15 23:17:18
嘗試flexbox模型：容器div應該具有：
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
padding-top:somevalue;
解決方案2
0 2019-06-16 00:01:45
這是一個解決方案，您可以嘗試一下。謝謝:)
#container { display: flex; /* establish flex container */ flex-direction: column; /* make main-axis vertical */ justify-content: center; /* align items vertically, in this case */ align-items: center; /* align items horizontally, in this case */ height: auto; /* for demo purposes */ border: 1px solid black; /* for demo purposes */ background-color: #eee; /* for demo purposes */ } .box { width: 100%; margin: 5px; text-align: center; } #bluebox { background: aqua; } #redbox { background: red; } #greenbox { background: green; }
<div id="container"> <!-- flex container --> <div class="box" id="bluebox"> <!-- flex item --> <img src="http://highresolution.photography/images/tree-in-sunset-main.jpg" width="300px" alt=""> </div> <div class="box" id="redbox"> <!-- flex item --> <img src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" width="300px" alt=""> </div> <div class="box" id="greenbox"> <!-- flex item --> <img src="https://images.unsplash.com/photo-1500622944204-b135684e99fd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80" width="300px" alt=""> </div>
如何將 div 中的圖像居中（垂直和水平）在另一個 div 中居中（水平）
[英]How to center (vertically and horizontally) an image inside a div centered (horizontally) in another div
使 div 垂直居中導致它稍微水平偏離居中
[英]Making a div vertically centered causing it to be slightly horizontally off centered
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.