相关疑难解决方法(0)

我想做的就是将文本垂直和水平放在img上.

试了很多东西但到目前为止没有任何作用:/

    <div class="img_container">
     <img class="cover-image" src="img.jpg" alt="omg" />
     <h2> bla bla bla </h2>
   </div>

  .img_container {
    width: 100%;
  }

  .img_container h2 {
    margin: 0;
  }

我正面临一个问题,如何将div中的文本(h1)居中.我希望网页是全屏的,我用vh单位实现了这一点.

.page { height: 100vh; 
        width: 100%;}

在那个页面上,我希望div水平和垂直居中.我试过了

.div { top: 50%;
      left: 50%;}

但那只是没有做到的伎俩.我也希望这是"resposive"si,它以任何屏幕为中心.我希望建立这样的东西:http://www.anthonygoodisondesign.com/

我想在两个按钮之间放置一个图标.图标比按钮大,我希望他们的中心在一条线上.这意味着图标位于按钮的上方和下方.

一个简单的方法是按钮组.不幸的是,图标四舍五入,按钮组中的按钮与组中的邻居有明显的边缘,图标重新调整为与按钮相同的大小:

所以我试图摆脱按钮组.Bootstrap有一个垂直对齐的align-middle类.但我不能让这个工作.它看起来像这样:

我浏览并发现了这个:如何水平和垂直居中元素？

答案列出了各种方法.我想坚持使用bootstrap并尽可能避免使用自定义css.但其中一个选项听起来对我很好:在flexbox容器中使用对齐和对齐.Bootstrap容器是flexboxes,所以我将我的按钮包装在一个容器中并添加align-items: center; justify-content: center;.与上align-middle图相同.

我尝试了各种其他的CSS组合,没有任何成功.上面的三种方法对我来说似乎最干净,所以我在这里介绍它们.

小提琴:https://jsfiddle.net/aq9Laaew/285443/

HTML(假设你有bootstrap和fontawesome):

<!-- using a flexbox container + css -->
<div class="container" style="align-items: center; justify-content: center;">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-times-circle" style="color:red;"></i>
  </button>
  <i class="far fa-question-circle fa-3x" style="color: lightskyblue"></i>
  <button type="button" class="btn btn-outline-secondary">
    <i class="far fa-check-circle" style="color:green;"></i>
  </button>
</div>
<br>

<!-- using the bootstrap align-middle class -->
<div class="align-middle">
  <button type="button" class="btn btn-outline-secondary">
    <i class="far …

我希望内容垂直和水平居中，但它仅水平居中。问题是我没有固定的高度。谢谢你们的帮助！

html,
body {
  height: 100% margin: 0;
  overflow: hidden;
}
.content {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  text-align: center;
}

<div class="content">
  <h1>Welcome to the website!</h1>
</div>