文章とその隣の画像ロゴの縦横中央揃えができません。

画像のように文章と矢印画像を縦横中央に揃えてその二つの間隔を開けたいのですが、そうやってもうまくできません。

HTML
1  <div class="p-main__item__more">
2    アイテムをもっと見る
3    <img src="./img/serch_arrow.png" class="c-item__more--button" alt="serch_arrow">
4   </div>

CSS
1.p-main__item__more{
2  height: 60px;
3  margin-left: 19px;
4  border-bottom: solid 2px #d3d3d3;
5  font-size: 25px;
6  padding: 20px 0;
7}

行動規範の内容に同意します

回答2件

ベストアンサー

CSS
1.p-main__item__more{
2  height: 60px;
3  margin-left: 19px;
4  border-bottom: solid 2px #d3d3d3;
5  font-size: 25px;
6  padding: 20px 0;
7  /* 以下追加 */
8  display: flex;
9  justify-content: space-between;
10  align-items: center;
11  padding-left: 25px;  /* ここは調整してください */
12  padding-right: 25px; /* ここは調整してください */
13}

投稿2019/11/12 12:13

shinji709

総合スコア805

HTML
1
2<div class="p-main__item__more">
3  <span>アイテムをもっと見る</span>
4  <img src=https://placehold.jp/15x15.png class="c-item__more--button" alt="serch_arrow">
5</div>
6

CSs
1
2.p-main__item__more{
3  height: 60px;
4  margin-left: 19px;
5  border-bottom: solid 2px #d3d3d3;
6  font-size: 25px;
7  padding: 20px 0;
8  display: table;/*ここと*/
9  width: 100%/*ここと*/
10}
11.p-main__item__more span{/*ここから*/
12  display: table-cell;
13}
14.c-item__more--button {
15  display: table-cell;
16  text-align: right;
17}/*ここを追加*/
18