要素を上下中央寄せにしたいのですが、どうしても右上寄せになってしまいます。それとpositionについて。

画像のように作りたいのですが、矢印画像が斜め上に配置されてしまいます。
この画像は他の部分でも使っているのでpadding,marginなどの設定以外で真ん中に寄せたいです。
それと背景赤のNEWを配置するときはposition relative,absolute以外でも設定できますか。
よろしくお願いいたします。

HTML
1<ul class="p-main__contents__topics--item">
2                <li class="p-main__contents__ownerReview--list">
3                  <a href="#" class="p-main__contents__ownerReview--list-link">
4                    <div class="p-main__contents__topics--item__inner">
5                      <img src="./img/k_8.jpg" class="p-main__contents__newsLogo"alt="news">
6                      <div class="ownerReview__item__name">
7                        <p class="ownerReview__item__name-txt">  grafの世界観に触れる!</p>
8                        <p class="ownerReview__item__name-new">NEW</p>
9                      </div>
10                      <img src="./img/serch_arrow.png" class="c-item__more--button" alt="serch_arrow">
11                    </div>
12                      </a>
13                    </li>

CSS
1.p-main__contents__ownerReview--list{
2  font-size: 12px;
3  line-height:70px;
4}
5.p-main__contents__topics--item__inner{
6  display: flex;
7}
8.ownerReview__item__name{
9  color: black;
10  font-size: 17px;
11  padding-left: 10px;
12  position: relative;
13  display: flex;
14  align-items: center;
15}
16.p-main__contents__newsLogo{
17  width: 80px;
18  height: 80px;
19  padding-top: 20px;
20  padding-left: 20px;
21}
22コード

kyoya0819

2019/11/18 00:21

斜め上になっているようには見えないのですがどのような表示になることを期待していますか？

azuapricot

2019/11/18 00:22

クラス名って複数設定できますけどしってますよね？

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

回答2件

せっかく display: flex; を指定してますので、Flexboxの使い方をまずは学習しましょう。
例えば、下記がよくまとめられています。

【CSS】Flexboxの使い方を徹底解説！基本から実践まで(サンプルあり) | creive【クリーブ】

日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

Flexboxが使いこなせるようになると、
例えばアイテムの上下中央寄せは、align-items: center;で簡単にできます。padding, margin, position などでpx単位で細かく指定しなくても自動で中央に配置してくれます。

イメージに近いレイアウトのコード例

css
1.p-main__contents__ownerReview--list{
2  font-size: 12px;
3/*  line-height:70px;*/
4  list-style-type: none; /* 追加 */
5}
6.p-main__contents__topics--item__inner{
7  display: flex;
8  justify-content: space-between;  /* 追加 */
9}
10.ownerReview__item__name{
11  color: black;
12  font-size: 17px;
13  padding-left: 10px;
14/*  position: relative;
15  display: flex;  */
16  flex-grow: 1;       /* 追加 */
17  align-items: left;  /* 追加 */
18}
19
20.p-main__contents__newsLogo{
21  width: 80px;
22  height: 80px;
23/* padding-top: 20px;
24  padding-left: 20px; */
25}
26
27 /* 以下追加 */
28.ownerReview__item__name-new{
29  color: white;
30  background-color: red;
31  display: block;
32  width: 45px;
33}