html 如何从div顶部对齐对齐文本?

wfsdck30  于 2023-10-14  发布在  其他
关注(0)|答案(1)|浏览(98)

我有问题,我的文本从div顶部对齐。如何使文本从.txt div的中心垂直对齐?

#content #main #services {
  width: 1010px;
  height: auto;
  min-height: 320px;
  margin: 50px auto;
}

#content #main #services .langelis {
  width: 510px;
  height: auto;
  min-height: 140px;
  position: relative;
  border: 1px #000 solid;
}

#content #main #services .langelis .icon {
  width: 65px;
  min-height: 140px;
  height: auto;
  float: left;
  border: 1px #000 solid;
}

#content #main #services .langelis .txt {
  width: 440px;
  height: auto;
  float: left;
  border: 1px #000 solid;
}
<div id="services">
  <div class="langelis">
    <div class="icon">
      <img src="images/knyg.jpg" alt="knyga" />
    </div>

    <div class="txt">
      <h1>Lorem Ipsum</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
    </div>
  </div>

  <div class="clear"></div>
</div>
e37o9pze

e37o9pze1#

首先,你需要修复你的CSS选择器。你不能这样写所有的ID:

#content #main #services

选择一个元素和它的子元素。例如,如果你测试它,它将与你一起工作:

#services .langelis .txt {
    width: 440px;
    height: auto;
    float: left;
    border: 1px #000 solid;
    text-align:center;
}

如果你想让它垂直对齐**.txt**div的中心,你可以这样做:

#services {
  width: 1010px;
  height: auto;
  min-height: 320px;
  margin: 50px auto;
}

#content #main #services .langelis {
  width: 510px;
  height: auto;
  min-height: 140px;
  position: relative;
  border: 1px #000 solid;
}

#content #main #services .langelis .icon {
  width: 65px;
  min-height: 140px;
  height: auto;
  float: left;
  border: 1px #000 solid;
}

#services .txt {
  width: 440px;
  height: 500px;
  border: 1px #000 solid;
  display: table;
  text-align: center;
}

.sub {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="services">
  <div class="langelis">
    <div class="icon">
      <img src="images/knyg.jpg" alt="knyga" />
    </div>

    <div class="txt">
      <div class="sub">
        <h1>Lorem Ipsum</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s..</p>
      </div>
    </div>
  </div>
  
  <div class="clear"></div>
</div>

相关问题