如何在相对父级的填充顶部内垂直对齐div

Question

我正在尝试使图像旁边几行文字的中间垂直对齐，该图像也以其自己的div为中心。

图片和文本div的父div都是响应式的。

我对齐图片的方式似乎阻止了文本对齐。我尝试使用表和其他解决方案（也在堆栈溢出中找到），但似乎没有任何效果。

我在做什么错？

.parent-wrapper {
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #bfbfbf;
    border-top: 1px solid #bfbfbf;
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.image-wrapper {
    position: relative;
    float: left;
    width: 30%;
    padding-top: 30%;
}

.image {
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    background: no-repeat;
    background-size: cover;
    background-position: center;
    min-width: 100%;
}

.text-wrapper {
    position: relative;
    float: right;
    width: 70%;
    padding-top: 30%;
    overflow: hidden;
}

.text-details {
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0;
    vertical-align: middle;
    background: center;
}

.some-text {
    font-size: 20px;
}

.other-text {
    font-size: 20px;
}

.another-text {
    font-size: 20px;
}

<div class="parent-wrapper">
                
   <div class="image-wrapper">
      <div class="image" style="background-image: url('folder/picture.jpg');" alt="image">
      </div>
   </div>

   <div class="text-wrapper">
      <div class="text-details">
         <div class="some-text">some text</div>
         <div class="other-text">other text</div>
         <div class="another-text">another text</div>
      </div>
   </div>

</div>

Answer 1

尝试

    starter.service("verifywallet", ['$http', '$q', function($http, $q) {

this.getdata = function() {
    var url = baseAPIUrl + "IsEnableWallet/";
    var def = $q.defer();
    var IsEnableWallet = undefined;
    if (IsenableWallet) {
        $http({
            method: "GET",
            url: url
        }).then(function(response) {
            if (response.data.status.success == true) {
                var IsenableWallet = response.data.status.Isenable;
                def.resolve(IsenableWallet);
            } else {
                def.resolve(false);
            }
        })
        IsenableWallet = def.promise;
    }
    return $q.when(IsenableWallet);
}

this.verify = function() {
    return this.getdata();
}
}]);

.parent{
  position:relative;
  height:50vh;
  background-color:blue;
}
.box-to-center{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  color:white;
}