CODEWITHSUNDEEP
htmlcss
Noah Burchell
Noah Burchell

Reputation: 27

Divs not vertically aligning inside flex container

Here is my code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Maya Writing</title>
        <style>

body {
  background-color: white;
  color: black;
  margin: 35px;
  font-family: Arial, Helvetica, sans-serif;
}

.gorc {
  border: 3px solid black;
}

h1 {
    font-weight: bold;
}

.l {
  position: fixed;
  padding: 5px;
  top: 0;
  left: 0;
  right: 0;
}

.imageside {
  display: flex;
  height: min-content;
  align-self: center;
  justify-content: center;
}
iframe {
  padding: 10px;
  vertical-align: middle;
}
.pbx {
  width: 440px;
  height: 230px;
  text-align: justify;
  padding: 10px;
  vertical-align: middle;
}

.r { text-align: right; }

        </style>
    </head>
    <body>
<a class="l" href="index.html">Home</a>
<center><h1>Maya Writing</h1></center>
<div class="imageside">
<div><p class="pbx">Mayan hieroglyphic writing was a writing system used by the Maya people, it was used from 3rd century BC to the 17th century AD. Mayan was a mix of logosyllabic and ‏‏‎syllabogrammatic writing systems (Syllabograms are signs used to write syllables), although people thought it was entirely logosyllabic until recently. A logosyllabic is a language where every syllable is a word or morpheme, this is close to Mayan, but in Mayan some syllables are just a sound. Mayan was really complex because there are around 1000 symbols! This made it really hard for linguists to decipher. Mayan only had 5 vowels and 19 consonants compared to english's 20 vowels and 24 consonants, that isn't much.
</p></div>
<iframe width="440" height="230" src="https://www.youtube.com/embed/lgsQndSyfHg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div class="imageside">
<iframe src="https://www.google.com/maps/embed?pb=!1m24!1m12!1m3!1d999.7262863339503!2d-87.43068604629732!3d20.214751884148985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m9!3e6!4m3!3m2!1d20.214792199999998!2d-87.4302019!4m3!3m2!1d20.214764!2d-87.43018599999999!5e0!3m2!1sen!2sau!4v1621485999736!5m2!1sen!2sau" width="440" height="230" style="border:0;" allowfullscreen=""></iframe>
<div><p class="pbx">
</p></div>
</div>


<h4>External Resources Used</h4>
<ul>
  <li>Video: Video talking about Maya Glyphs</li> 
  <li>Map: Location of Tulum Mayan Ruins</li>
</ul>
<h4>Bibliography</h4>
<ul>
  <li>Britannica, The Editors of Encyclopaedia. "Mayan hieroglyphic writing". Encyclopedia Britannica, 21 Feb. 2007, <a href='https://www.britannica.com/topic/Mayan-hieroglyphic-writing'>https://www.britannica.com/topic/Mayan-hieroglyphic-writing</a>. Accessed 20 May 2021.</li> 
  <li>Cartwright, Mark. "<a href="https://www.worldhistory.org/article/655/maya-writing/">Maya Writing.</a>" World History Encyclopedia. World History Encyclopedia, 12 Feb 2014. Web. 26 May 2021.</li>
</ul>
    </body>
</html>

When I run this, the text is not vertically aligned with the video iframe.

I put a black border around the text to check, and it's just not vertically aligned, there isn't a paragraph break in the text.

The browser I'm using is Brave.

Upvotes: -2

Views: 52

Answers (1)

Maik Hasler
Maik Hasler

Reputation: 1380

  1. Change your HTML structure
<div class="imageside">
    <iframe></iframe>
    <p>Some Text</p>
</div>
  1. Change your styling for the div
.imageside {
    display: flex;
    align-items: center;
}

This should center your content vertically in the correct way.

Upvotes: 3

Related Questions