ボックスの位置配置、ボーダーの配置がわかりません。

Question

画像の通り、黒いボックス部分のバランスが悪くて修正に困難しています。


ボックスの上部分が中心となっており、ボックスの中の文字を中心にしたいです。

質問が多くて申し訳ないのですが、もう一つわからないことがあります。
住友商事のLPを模写しているのですが、こちらの写真の点線のボーダーを入れ方がわかりません。
見本の画像

一度に二度質問して申し訳ありません。
どなたかご教授よろしくお願い致します！

コードはこちらになります。

  <main class="mti-main">
    <article class="mti-article">
      <img class="photo1" src="img/heroVisual.jpg" alt="メイン写真">
      <p class="photo1letter">Enriching lives and the world</p>
      <div class="list1">
        <div class="newsList">
          <div class="dlView">
            <dl>
              <dt class="date">2020年10月09日</dt>
              <dd class="label">
                <span class="_label">ニュースリリース</span>
              </dd>
              <dd class="outline">
                <img class="outlineImage" src="img/icons/icon-pagetop1.png" alt="">
                <span class="_outline">シエラゴルダ銅鉱山の権益持分の戦略的選択肢の検討について</span>
              </dd>
           </dl>
          </div>
          <div class="dlView">
            <dl>
              <dt class="date">2020年10月05日</dt>
              <dd class="label">
                <span class="_label">ニュースリリース</span>
              </dd>
              <dd class="outline">
                <img class="outlineImage" src="img/icons/icon-pagetop1.png" alt="">
                <span class="_outline">農業関連物流マッチングサービスの事業化に向けた実証実験の開始について</span>
              </dd>
            </dl>
          </div>
          <div class="dlView">
            <dl>
              <dt class="date">2020年10月01日</dt>
              <dd class="label">
                <span class="_label">ニュースリリース</span>
              </dd>
              <dd class="outline">
                <img class="outlineImage" src="img/icons/icon-pagetop1.png" alt="">
                <span class="_outline">主管者級人事異動および機構改正に関するお知らせ</span>
              </dd>
            </dl>
          </div>
          <div class="dlView">
            <dl>
              <dt class="date">2020年10月01日</dt>
              <dd class="label">
                <span class="_label">トピックス</span>
              </dd>
              <dd class="outline">
                <img class="outlineImage" src="img/icons/icon-pagetop1.png" alt="">
                <span class="_outline">100SEED キャリア教育支援「Mirai School」を都立西高にて開催</span>
              </dd>
            </dl>
          </div>
          <div class="dlView">
            <dl>
              <dt class="date">2020年10月09日</dt>
              <dd class="label">
                <span class="_label">ニュースリリース</span>
              </dd>
              <dd class="outline">
                <img class="outlineImage" src="img/icons/icon-pagetop1.png" alt="">
                <span class="_outline">イギリスにおける洋上風力発電事業Five Estuaries案件の開発参画について</span>
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </article>
  </main>

.mti-main {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.mti-article {
  position: relative;
  z-index: 2;
}

.photo1 {
  width: 100%;
  height: 800px;

}

.photo1letter {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  font-size: 75px;
  color: #ffffff;
  white-space: nowrap;
  font-family: 'Superclarendon', sans-serif;
}

.list1  {
  display: flex;
  justify-content: center;
}

.dlView {
  margin-bottom: 20px;
}

.newsList {
  position: relative;
  margin-top: 64px;
}

dl {
  display: flex;
  font-family: YuGothic,'Yu Gothic', sans-serif;
}

.date {
  margin-right: 15px;

}

.label {
  margin-right: 15px;
  background-color: #000000;
  min-width: 140px;
  width: 120px;
  height: 15px;
  max-width: 120px;
  padding: 7px 14px;
  display: inline-block;
  font-size: 12px;
  overflow: hidden;
  text-align: center;
  color: #fff;
}

.outline {
  display: flex;
}

.outlineImage {
  height: 16px;
  width: 16px;
  margin-right: 15px;
}

よろしくお願い致します！

Comments

[m.ts10806]

参考先があるならそちらを解析するのが最も確実です。
https://ascii.jp/elem/000/000/999/999122/
正直、「参考先を確認する」のと「他人に質問して答えを得る」のは殆どやってること変わりません。

[sonnabanana]

検証でみながらやってはいたんですが、わからず質問致しました。

[m.ts10806]

ChromeであればStylesを見れば分かります。
が、どこまで確認したのか質問に書かれないと伝わりませんので、
どこをどのように確認したのかを具体的に記載してください。

Answer 1

ボックスの上部分が中心となっており、ボックスの中の文字を中心にしたいです。

ボックス内の要素を上下中央の位置に配置したいということでしょうか。

dl {
  display: flex;
  align-items: center; /* 上下中央寄せ */
  font-family: YuGothic,'Yu Gothic', sans-serif;
}

FlexBoxにはいろいろ便利なプロパティかあるので一通り覚えておきましょう。

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

私は下記をよく利用してます。

Flexbox の基本的な使い方/Web Design Leaves

こちらの写真の点線のボーダーを入れ方がわかりません。

「CSS 下線 点線」とか「CSS ボーダー 点線」とかのキーワードで検索すればいろいろサンプルが見つかりますので、その中から近いものさがせばいいかと思います。

Comments

[sonnabanana]

hatena19さんご回答ありがとうございます！
参考サイトまでありがとうございます！！