画布上的文字很奇怪

Question

新手问题;试图学习网页设计，我一路走来。但是有人可以试着向我解释一下。

这是我网站上某个特定部分的外观：

我正在尝试将图像分成40％的屏幕，将文本分割为剩余的60％。它很顺利，但我无法弄清楚为什么文本出现在底部而不是顶部？我猜它很简单，还是我搞砸了？

这是我的HTML：

<section>
<div class="about">
  <div class="about_img"></div>
    <div class="about_text">
      <h1>Some Text</h1>
      <p>Some supporting text</p>
</div>
</section>

我的CSS部分：

.about{
    width: 100%;
    height: 300px;
    background-color: #F0F0F0;
    min-height: auto;
    display: inline-block;
}
.about_img{
    width: 40%;
    height: 100%;
    background-image: url("/assets/alex-image.JPG");
    background-size: cover;
    display: inline-block;
 }
 .about_text{
     width: 20%;
     display:inline-block;
     position: relative;
     margin-left: 50px;
 }

如果您需要任何其他信息，请与我们联系。我还将我的网站上传到http://www.alexwiley.co.uk

谢谢，

Answer 1

答案，感谢CBroe。

使用vertical-align：top;将元素对齐到块的顶部。

Answer 2

您应该将此css添加到文本中以使其位于顶部：

console.log

Answer 3

您可以将onNewIntent()添加到vertical-align: top，使其垂直对齐。

可能的值

根据this page，您拥有的其他可能值包括：

<div class="about_text">

元素位于父元素

的中间

vertical-align: middle

元素的底部与线上的最低元素对齐

vertical-align: bottom

按指定长度升高或降低元素。允许负值

vertical-align: {length}

以“line-height”属性的百分比形式提高或降低元素。允许负值

vertical-align: {X}%

将元素对齐，就像它是下标

一样

vertical-align: sub

将元素对齐，就像它是上标

一样

vertical-align: super

元素的顶部与父元素的字体

的顶部对齐

vertical-align: text-top

元素的底部与父元素的字体

的底部对齐

默认

默认值为：

vertical-align: text-bottom

将元素的基线与父元素的基线对齐。

答案

vertical-align: baseline

.about{
  width: 100%;
  height: 300px;
  background-color: #F0F0F0;
  min-height: auto;
  display: inline-block;
}
.about_img{
  width: 40%;
  height: 100%;
  background-image: url("http://www.alexwiley.co.uk/assets/alex-image.JPG");
  background-size: cover;
  display: inline-block;
}
.about_text{
  width: 20%;
  display:inline-block;
  vertical-align: top;
  position: relative;
  margin-left: 50px;
}