横並びで高さを調整できない

Question

以下の画像のように同レイヤーの要素の横並びにdisplay: inline-blockを指定していますが更新用のアイコンだけ少し下げたい場合はどのように指定すればいいのでしょうか？？

環境情報（使用言語）→CSSで解決できるかもしれませんが一応。。。

• Nuxt.js:2.8.1
• TypeScript
• マテリアルデザイン：ElementUI

現状

<template>
 <div>
   <el-pagination
     class="pagination"
     :current-page.sync="currentPage.page"
     :page-size="pageSize"
     :total="total"
     @prev-click="page"
   />
 <i class="el-icon-refresh-right pagination_icon" @click="update"></i>
 </div>
</template>

<style scoped>
.pagination {
  display: inline-block;
}

.pagination_icon {
  display: inline-block;
 margin-top: 10px;
}
</style>

• ご指摘よろしくお願い致します。

Comments

[m.ts10806]

JavaScriptは今回どのように関係するのでしょうか。

[sanezane]

失礼しました。誤りです。htmlへ修正します。

[m.ts10806]

あまり詳しくないですがVue.jsかなにかでしょうか。
そちら方面のタグはつけられたほうが良いと思います。

[sanezane]

ありがとうございます。使用言語としてマテリアルデザイン等追記しました。

Answer 1

inline-block要素に

vertical-align: middle;

もつけてやれば高さは揃いますよ。

Comments

[sanezane]

ありがとうございます。ご指摘の通りで期待の結果が得られました。