在css中对齐图像旁边的文本

Question

this is who it supposed to look

这里是 HTML

<section class="right">
        <h2>Watch your Head </h2>
        <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore
            in many Midwestern college towns. Students (and people who wish they were still students) spend the few
            briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
        <p>What I find much more entertaining is the large number of people who continue to play when the weather
            gets windy and the night sky darkens around oh....4:15pm. The sight of frisbees boomeranging in the wind
            is topped only by the knowledge that even when you can't seem, those same plastic discs of death are
            probably hurtling through the dark night sky at 8 or 9 o'clock in the evening.
        </p>
        <p>Ultimate Frisbee requires a great deal of stamina and dexterity. Not surprisingly, the <abbr
                title="International Olympic Committee">IOC</abbr> officially recognized Ultimate as a sport in
            2015. It can go up against other sports for inclusion in Olympic games.</p>
    </section>

Fixed 不允许文本保持不变。请告诉我我做错了什么？

.right {
    position: fixed;
    top: 30%;
    left: 30%;
    transform: translate(-50%,-50%);
    width: 200px;
    height: 50px;
    padding: 20px;
    font-size: 16px;
    text-align: inherit;
}

Answer 1

#left {background:black;
       width:30%;
       float:left;}

#right {width:70%;
        float:left;}

#content {width:80%;
          padding-left:10px;
          line-height: 30px;}

.img {background:white;
      width:150px;
      height:150px;
      display:block;
      margin: 10px auto;}

<div id="left">
  <div class="img"></div>
  <div class="img"></div>
  <div class="img"></div>
</div>
<div id="right">
  <div id="content">
  <h2>Watch your Head </h2>
        <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore
            in many Midwestern college towns. Students (and people who wish they were still students) spend the few
            briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>

    </div>
</div>

如果你想在每个 img 上放置文字 喜欢

(img A)（解释文字），

(img B) (B解释文字) 然后使用表格

.img {width:150px;
      height:150px;
      background:white;
      display:block;
      margin:10px auto;}

.imgbox { background:black;
          width:30%;}

.text {padding-left:10px;}

<table cellpadding="0" cellspacing="0">
  <tr>
    <td class="imgbox"><div class="img"><div></td>
    <td>
      <div class="text">
        <h2>Watch your Head </h2>
         <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore
            in many Midwestern college towns. Students (and people who wish they were still students) spend the few
            briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
      </div>
    </td>
  </tr>
<td class="imgbox"><div class="img"></div></td>
    <td>
      <div class="text">
        <h2>Watch your Head </h2>
         <p>Ultimate Frisbee is a sport that I never played myself, but it's popularity is something hard to ignore
            in many Midwestern college towns. Students (and people who wish they were still students) spend the few
            briefs months of good weather, sprinting down fields, hurling frisbees, and yelling "Stack!!".</p>
      </div>
    </td>
  </tr>
<table>