时间戳

首页 > 解决方案 > Divs 没有在 flex 容器内垂直对齐

html - Divs 没有在 flex 容器内垂直对齐

问题描述

这是我的代码

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

当我运行此文本时，文本未与视频 iframe 垂直对齐，请帮助我在文本周围放置一个黑色边框以检查，它只是没有垂直对齐，文本中没有分节符

它说我需要更多文字，所以你知道我的浏览器很勇敢，如果这很重要更多文字？！还有什么更多的细节 omfg omfg lorum ipsum dolor idk 拉丁语基础文本 thingo 为什么我需要这么多文本，不需要这么多细节

标签： htmlcss

解决方案

1.改变你的html结构

<div class="imageside">
   <iframe></iframe>
   <p>Some Text</p>
</div>

2. 更改 div 的样式

.imageside {
   display: flex;
   align-items: center;
}

这应该以正确的方式垂直居中您的内容！薄纱

推荐阅读