RWD:垂直对中2 div

Question

我想把2div垂直地放在中间，我想使用vertical-align: middle，但这不起作用，也尝试了margin，不工作枯萎。

我该怎么做才能把这两个人集中起来？

码

​

.about{
    text-align: center;
    position: relative;
}

.aboutImg {
    position: absolute;
    width: 100%; 
    left: 0px;
}
.textContainer {
    position: relative; 
    width: 60%; 
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
}

<div class="about" id="aboutStrings">
  <img class="aboutImg" src="about1.jpg">
  <div class="textContainer">
    <h1>About Strings</h1>
    <p>Strings Ramen Shop pulls a piece of Japanese Culture to Chicago, we can be found in the heart of Chinatown, directly across from New Chinatown Square. While other restaurants may serve ramen along with a number of other entrees, Strings Ramen focuses specifically on ramen. Along with ramen, Strings will also offer the appetizing oden, a Japanese winter street food. On top of tasting delightful, the ramen at Strings is also affordable but gives the option of adding more deluxe ingredients. The menu includes four types of ramen broth with a variety of high-end ingredients that are added to make the dish even more delectable.
                One of the major aspects of Strings is the noodles themselves. Strings will make fresh noodles daily using only their unique dough mixer and noodle maker imported straight from Japan. The use of fresh noodles, and genuine broth combined with passion and the use of only the best ingredients will certainly set Strings Ramen Shop apart.</p>
  </div>
</div>

​

我还希望图像根据屏幕大小调整大小，最重要的是，文本应该始终包含在图像中。因此，当屏幕变小时，如果段落的高度延伸到500 be，则图像高度应自动调整大小以包含文本。我已经包括了引导css。

Answer 1

在不使用Flexbox的情况下，您可以使用一些绝对定位来实现这一点。

.about {
  position: relative;
}
.textContainer {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

这将使textContainer垂直地位于about容器内。

CSS技巧为这个这里提供了一个很好的资源。

Answer 2

vertical-align:middle仅适用于inline-block级别元素

在你的css中试试这个

.about{
  text-align: center;
}
.aboutImg {
  width: 40%; 
  display: inline-block;
  vertical-align:middle;
}
.textContainer {
  width: 40%; 
  display: inline-block;
  vertical-align:middle;
}

Answer 3

在使用垂直对齐:中间；之前先阅读一下它。

当您使用垂直对齐:中间；时，父元素的高度必须大于其内容，否则它将不会垂直居中。

注意:0的值不应指定单位。

下面是一个简单的织法，它准确地显示了它是如何完成的。

​

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: rgb(0, 28, 66);
  font: 20px arial;
}

header {
  display: table;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  overflow: hidden;
}

nav {
  display: table-cell;
  vertical-align: middle;
}

<header>
  <nav>
    <h1>
    	Hello
    </h1>
  </nav>
  <nav>
    <h1>
    	world!
    </h1>
  </nav>
</header>

​