文章/答案/技术大牛

发布

社区首页 >问答首页 >垂直对齐html引导行中的文本

问垂直对齐html引导行中的文本
EN

Stack Overflow用户

提问于 2019-07-06 00:12:01

回答 1查看 32关注 0票数 0

我有一个bootstrap行，其中有三列(col-sm-2；col sm-8；col sm-2)。在中的第一列中将插入一张卡片，在第二列中我将插入文本，在最后一列中将添加工具提示。我会重复这一行很多次。

因为我不熟悉html (和css)，所以我尝试垂直对齐第三列。在下面的图像中，我展示了我需要用橙色突出显示的示例

。这可能是一件很容易做的事情。有人能帮上忙吗？(代码如下)：

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-2">
        <div id="panelImage">
          <h4>Lorem ipsum dolor sit amet</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        </div>
      </div>
      <div class="col-sm-8">
        <h2>Lorem ipsum dolor sit amet</h2>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. 
                Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, 
                consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat 
                voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea 
                commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem 
                eum fugiat quo voluptas nulla pariatur?</p>
      </div>
      <div class="col-sm-2">
        <p id="thing">Lorem ipsum</p>
      </div>
    </div>
</body>

在css下面：

#panelImage{
  background-color: #dcdcdc;
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 3px;
  border-radius: 1px;
  border-color: coral;
  height: 200px;
  padding: 15px;
}

#panelText{
  margin-top: 10px;
}

#thing{
  top: 50%;
  justify-content: center;
  }

css

bootstrap-4

html

回答 1

Stack Overflow用户

发布于 2019-07-06 00:20:26

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

<div class="wrapper">
  <div class="col-sm-8">
    <h2>Lorem ipsum dolor sit amet</h2>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
      voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi
      tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui
      in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
  </div>
  <div class="col-sm-2">
    <p id="thing">Lorem ipsum</p>
  </div>
</div>

你需要这样的东西吗？

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/56906360

复制

相似问题

问垂直对齐html引导行中的文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直对齐html引导行中的文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问垂直对齐html引导行中的文本
EN