如何在<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

I'm not sure what to do, I've tried using position, but it just aligns to the middle of the page, not the div.

I'm trying to align it vertically in the middle.

 .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

Wrap it in a flexbox container

 .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>