Фрейм Facebook в левой части страницы

Question

Я хочу, чтобы встроенный фрейм-фрейм в Facebook находился слева от текста. Не уверен, как это сделать, используя CSS или что-то еще. Может кто-нибудь помочь? В настоящее время кажется, что встраивание встроено в текст и находится слева. Я хочу, чтобы он продолжал сидеть слева, но я хочу, чтобы текст рядом с ним начинался с той же высоты. Я также хочу, чтобы он располагался по центру слева от текста.

   <template>
  <div>
    <iframe src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAirCombatGroup%2F&tabs=timeline&width=340&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId" align="center" width="50%" height="500" style="border:none;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
    <div class="headerHome">
    <h1>Welcome to the Air Combat Group</h1>
  </div>
    <div class="homeText">
      <p>
      The Air Combat Group consists of both Allied and Axis squadrons under a single operational umbrella flying with full realism settings. We are an English and German speaking group located in Europe, the Americas and Australia and meet on our own Teamspeak 3 and Discord servers. 
    </p>
  </div>
  </div>
</template>

<script>
SNIP
</script>

<style scoped>

  .homeText{
    width: 50%;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
  }

  .headerHome{
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

</style>

Answer 1

Вы можете использовать CSS-свойство 'position: fixed;'. Это позволяет вам позиционировать элемент в любом месте, но он останется в этой точной позиции.

Начните с присвоения ID iframe Facebook, вы можете просто добавить атрибут ID следующим образом:

<iframe id="facebook_box" ... ></iframe>

Затем добавьте правила CSS в элемент <style>. Вы также можете указать, чтобы элемент располагался сверху и слева (или снизу и справа и т. Д.). Код будет выглядеть так:

#facebook_box {
    top: 20px;
    left: 20px;
    position: fixed;
    display: inline-block;
}

Надеюсь, это поможет вам на вашем пути.