如何在<div>同時保持它在右邊？</div><div id="text_translate"><p> 我不知道該怎么做，我試過使用 position，但它只是對齊到頁面的中間，而不是 div。</p><p> 我試圖在中間垂直對齊它。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-css lang-css prettyprint-override"> .img1 { float: right; width: 20%; margin-right: 200px; display: inline-block; vertical-align: middle; }.img1 { border-radius: 50%; border: 5px solid white }.container { width: 100%; height: 500px; background-color: black; display: inline-block; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;div class="container"&gt; &lt;img class="img1" src="https://via.placeholder.com/500.jpg"&gt; &lt;/div&gt;</pre></div></div><p></p></div>

Question

我不知道該怎么做，我試過使用 position，但它只是對齊到頁面的中間，而不是 div。

我試圖在中間垂直對齊它。

 .img1 { float: right; width: 20%; margin-right: 200px; display: inline-block; vertical-align: middle; }.img1 { border-radius: 50%; border: 5px solid white }.container { width: 100%; height: 500px; background-color: black; display: inline-block; }

 <div class="container"> <img class="img1" src="https://via.placeholder.com/500.jpg"> </div>

Answer 1

將其包裹在 flexbox 容器中

 .img1 { float: right; width: 20%; margin-right: 200px; display: inline-block; vertical-align: middle; }.img1 { border-radius: 50%; border: 5px solid white }.container { width: 100%; height: 500px; display:flex; align-items:center; background-color: black; }

 <div class="container"> <img class="img1" src="https://via.placeholder.com/500.jpg"> </div>