如何在图中垂直居中？

Question

我希望这两个文本垂直居中于720px分辨率的图像。 文本“serwis”现在不是垂直于图像的中心。 我该怎么办？ 这是一个演示codepen

HTML代码

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    let notificationCenter = NotificationCenter.default
    notificationCenter.addObserver(self, selector: #selector(SignUpViewController.keyboardWillShow(notification:)), name: NSNotification.Name.UIKeyboardWillShow, object: nil)
    notificationCenter.addObserver(self, selector: #selector(SignUpViewController.keyboardWillHide(notification:)), name: NSNotification.Name.UIKeyboardWillHide, object: nil)
}

override func viewDidDisappear(_ animated: Bool) {
    super.viewDidDisappear(animated)

    let notificationCenter = NotificationCenter.default
    notificationCenter.removeObserver(self, name: NSNotification.Name.UIKeyboardWillShow, object: nil)
    notificationCenter.removeObserver(self, name: NSNotification.Name.UIKeyboardWillHide, object: nil)
}

@objc func keyboardWillShow(notification: NSNotification) {
    let userInfo = notification.userInfo!
    let keyboardHeight = (userInfo[UIKeyboardFrameEndUserInfoKey] as! NSValue).cgRectValue.height

    UIView.animate(withDuration: 0.3) {

        self.constraintBottomBtnNext.constant = keyboardHeight;
    }
    self.view.layoutIfNeeded();

    print(keyboardHeight);
}

@objc func keyboardWillHide(notification: NSNotification) {

    UIView.animate(withDuration: 0.3) {

        self.constraintBottomBtnNext.constant = 0;
    }

    self.view.layoutIfNeeded();
}

SCSS代码

<section class="primary">
        <figure class="primary__figure">
            <img class="primary__img" src="http://www.linkpad.me/static/img/welcome/key.png" alt="">
            <figcaption class="primary__caption">serwis</figcaption>
        </figure>

        <figure class="primary__figure">
            <img class="primary__img" src="http://www.linkpad.me/static/img/welcome/key.png" alt="">
            <figcaption class="primary__caption primary__caption--secondary">częsci zamienne</figcaption>
        </figure>
    </section>

Answer 1

float: right中有<figcaption>。浮动元素不能用于vertical-align。所以，你需要这样做：

.primary__caption, .primary__img {
  float: none;
  display: inline-block;
  vertical-align: middle;
}

预览

CodePen：http://codepen.io/anon/pen/NbpvyL

Answer 2

除了@Praveen Kumar的回答，你也可以使用

display:table-cell;
vertical-align:middle;

当然，父母需要

display:table;