ボックス/コンテナ内でテキストを水平方向に垂直に中央揃えする

このようなWebページを作成しようとしています。

ダウンロードページ

私はブートストラップで作業し、3つのダウンロードオプションを並べて配置するために行を作成しました。それから私はこれらの行にコンテナを作成し(ボックスを複製するため)、テキストとダウンロードアイコンを水平に中央揃えにしました。残念ながら、テキストとアイコンをコンテナ内で垂直方向に中央揃えにする方法がわかりません。誰かが手伝ってくれる?私の現在のデザインはこんな感じです:

Current design

私のコードは次のとおりです。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
  float: left;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
}
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        file_download
        
Download list of charities that have not submitted data yet

</div> </div> </div> </div>
</div> </div>

編集:答えてくれてありがとう!本当に感謝しています。私にとっては、単にコンテンツボーダークラスを以下のように調整することでうまくいきました。

.container-border {
border-style: solid;
border-color: rgb(0, 143, 197);
padding: 5px;
min-height: 120px;
display: flex;
align-items: center;
/* vertical center */
}
0
ru de
多分.container-borderを display:flex に設定し、それに justify-content:centeralign-items:center を与えてください。それはあなたが(あなたがそこに行っている他のどのCSSに依存して)あなたを閉じるでしょう。
追加された 著者 delinear,

4 答え

container-border クラスには flexbox を使います。その場合は、フロートを外すことができます。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  padding: 5px;
  text-align: center;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
  display: flex;
  align-items: center;
  /* vertical center */
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        file_download
        
Download list of charities that have not submitted data yet

</div> </div> </div> </div>
</div> </div>
1
追加された
ありがとうGerard、私はあなたの解決策を実行しました、そしてそれはうまくいきました!私はあなたの助けに感謝します!
追加された 著者 Christina,

あなたはFlexBoxを使ってものを複雑にする必要はありません。このようなもの、テーブルレイアウト、または line-heightvertical-align の組み合わせを使用してください。

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.download {
  font: Verdana, Helvetica, Arial, sans-serif;
  color: RGB(112, 112, 112);
  font-size: 18px;
  text-align: center;
  padding: 5px;
}

.download:hover {
  color: rgb(227, 111, 30);
  cursor: pointer;
}

#download-icon {
  font-size: 80px;
  vertical-align: middle;
  line-height: 120px;
}

#download-icon + span {
  vertical-align: middle;
  line-height: 1;
}

.container-border {
  border-style: solid;
  border-color: rgb(0, 143, 197);
  padding: 5px;
  min-height: 120px;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
  <div class="row">
    <div class="col-xs-4">
      <div class="container-border">
        file_download
         Download list of charities that have  not submitted  data yet 
      </div>
    </div>
  </div>
</div>
</div> </div>

プレビュー

preview

1
追加された
@Christinaありがとうございます! :)
追加された 著者 Soolie,
ありがとうSoolie!私はこの解決策を試しましたが、残念ながらそれは論理的には私には完全に理にかなっていましたが、私にとってはうまくいきませんでした。どこに誤りがあるのか​​わからなかったので、別の解決策を実行しました。しかし、とにかくたくさんあります!
追加された 著者 Christina,
これはStackOverflowに関する私の最初の質問でした。ただそれを受け入れた:)
追加された 著者 Christina,

add display: flex;align-items: center; to .container-border

.container-border{
 border-style:solid;
 border-color: rgb(0,143,197);
 padding: 5px;
 min-height:120px;
    display: flex;
    align-items: center;
 }
0
追加された

なぜパディングを設定しないでください。

.download {
    font: Verdana,Helvetica,Arial,sans-serif;
    color: RGB(112,112,112);
    font-size:18px;
    text-align:center;
    /* padding: 5px; <- removed */
    padding: 12px 5px 5px 5px; /* New */
}

#download-icon {
    font-size:80px;
    float:left;
    padding-top: 10px; /* New */
}

.container-border {
    border-style:solid;
    border-color: rgb(0,143,197);
    padding: 5px;
    min-height:120px;
    width: 300px; /* New*/
}

デモ:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.download {
    font: Verdana,Helvetica,Arial,sans-serif;
    color: RGB(112,112,112);
    font-size:18px;
    text-align:center;
    /* padding: 5px; <- removed */
    padding: 12px 5px 5px 5px; /* New */
}

.download:hover {
    color: rgb(227,111,30);
    cursor: pointer;
}

#download-icon {
    font-size:80px;
    float:left;
    padding-top: 10px; /* New */
}

.container-border {
    border-style:solid;
    border-color: rgb(0,143,197);
    padding: 5px;
    min-height:120px;
    width: 300px; /* New*/
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <div class="container-border">
                file_download
                
Download list of charities that have not submitted data yet

</div> </div> </div> </div>
</div> </div>
0
追加された
@NullDev私はサイズが問題ではないことを知っています。しかし300pxでは最小のものがあります:)
追加された 著者 Gerard,
普通のユーザー(729担当者)で、なぜStack Snippetを使えないのですか
追加された 著者 Soolie,
私は企業ネットワークの下にいて、そのサイトにアクセスできませんでした。それらのほとんどで起こります。また、リンクが腐敗する可能性もあります。 :)
追加された 著者 Soolie,
ありがとうボス... :)
追加された 著者 Soolie,
@Soolieここでは、肥大化したCSSコードを使用してデモを追加したくなかったので。フィドルを見てください。アイコンのコードも追加する必要がありました。それにもかかわらず、私はJSFiddleを使用して何も悪いとは思わない。
追加された 著者 NullDev,
@Soolieそう、代わりにスニペットを追加しました。
追加された 著者 NullDev,
@Gerard Haha、スクリーンショットから判断すると、OPはそれほど長いものは望んでいません。
追加された 著者 NullDev,