私はh1とh3を持っていますが、私はFoundation 6に垂直に中心を置くことができません。

私は基礎6のh1とh3タグを垂直に中心にしようとしました。スタックオーバーフローで複数の例を試してみましたが、何も動作しません。私が絶対的な位置を使ってコンテンツを中心に置くと、見出しは小さな画面のトップバーのナビの途中に入ります。この問題を解決するにはIDがあります。 h1タグとh3タグは、私のコードの48行と49行にあります。 Codepen link 私はh1とh3を持っていますが、私はFoundation 6に垂直に中心を置くことができません。

<!doctype html> 
<html class="no-js" lang="en" dir="ltr"> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Foundation for Sites</title> 
    <link rel="stylesheet" href="css/foundation.css"> 
    <link rel="stylesheet" href="css/app.css"> 
    </head> 
    <body> 
    <div class="off-canvas-wrapper"> 
      <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap"> 
       <!-- Close button --> 
      <button class="close-button" aria-label="Close menu" type="button" data-close> 
     <span aria-hidden="true">&times;</span> 
      </button> 
      <ul class="vertical menu"> 
       <li><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">References</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
      </div><!-- off-canvas menu --> 
      <div class="off-canvas-content" data-off-canvas-content> 
      <!-- Your page content lives here --> 
      <div class="hero-image"> 
       <div class="expanded header-intro row"> 
       <button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu --> 
       <div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation --> 
       <button class="menu-icon" type="button" data-toggle></button> 
       <div class="title-bar-title">Menu</div> 
       </div> 
       <div class="top-bar show-for-small-only" id="menu"> 
       <div class="top-bar-left"> 
       <ul class="dropdown vertical menu" data-dropdown-menu> 
        <li class="menu-text">Foundation Framework</li> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">About</a></li> 
        <li><a href="#">Reference</a></li> 
        <li><a href="#">About</a></li> 
       </ul> 
       </div> 
       </div> 
       </div> 
       <div class="row"> 
      <div class="small-12 text-center columns"> 
       <h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG --> 
       <h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG --> 
      </div> 
       </div> 
      </div><!-- Eno of hero-image section --> 
      </div><!-- off-canvas-content--> 
     </div><!-- off-canvas wrapper--> 
    <script src="js/vendor/jquery.js"></script> 
    <script src="js/vendor/what-input.js"></script> 
    <script src="js/vendor/foundation.js"></script> 
    <script src="js/app.js"></script> 
    </body> 
</html>

出典

2017-06-04 ShortCircuit616

へようこそ。おそらくヘッダーに一意であるこれらの_small-12テキストセンター列のいずれかを整列させてみてください。どのように整列することができます[ここ]（https://stackoverflow.com/questions/18649106/div-vertical-align-middle-css） – Syfer

あなたはフレキシボックスを使用することができます。 https://codepen.io/anon/pen/YQPPaM

$(document).foundation();

.hero-image { 
 
\t background: url(https://www.freewebheaders.com/wordpress/wp-content/gallery/mountains-snow/mountains-snow-header-7050.jpg); 
 
\t background-position: center center; 
 
\t background-repeat: no-repeat; 
 
\t background-size: cover; 
 
\t padding-bottom: 25%; 
 

 
} 
 
.container{ 
 
    height : 100vh; 
 
    display: flex; 
 
    flex-direction : column; 
 
    justify-content : center; 
 
    align-items : center; 
 
    
 
}

<html class="no-js" lang="en" dir="ltr"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>Foundation for Sites</title> 
 
    <link rel="stylesheet" href="css/foundation.css"> 
 
    <link rel="stylesheet" href="css/app.css"> 
 
    </head> 
 
    <body> 
 
    <div class="off-canvas-wrapper"> 
 
\t \t \t <div class="off-canvas position-left" id="offCanvas" data-off-canvas data-transition="overlap"> 
 
\t \t \t \t <!-- Close button --> 
 
    \t \t <button class="close-button" aria-label="Close menu" type="button" data-close> 
 
     \t <span aria-hidden="true">&times;</span> 
 
    \t \t </button> 
 
\t \t \t <ul class="vertical menu"> 
 
\t \t \t <li><a href="#">Home</a></li> 
 
\t \t \t <li><a href="#">About</a></li> 
 
\t \t \t <li><a href="#">References</a></li> 
 
\t \t \t <li><a href="#">Contact</a></li> 
 
\t \t \t </ul> 
 
\t \t \t </div><!-- off-canvas menu --> 
 
\t \t \t <div class="off-canvas-content" data-off-canvas-content> 
 
\t \t \t <!-- Your page content lives here --> 
 
\t \t \t <div class="hero-image"> 
 
\t \t \t \t <div class="expanded header-intro row"> 
 
\t   <button type="button" class="button float-right show-for-medium" data-toggle="offCanvas">Menu</button><!-- Button to open off-canvas menu --> 
 
\t   <div class="title-bar" data-responsive-toggle="menu" data-hide-for="medium"><!--top bar navigation --> 
 
       <button class="menu-icon" type="button" data-toggle></button> 
 
       <div class="title-bar-title">Menu</div> 
 
\t   </div> 
 
\t   <div class="top-bar show-for-small-only" id="menu"> 
 
\t    <div class="top-bar-left"> 
 
       <ul class="dropdown vertical menu" data-dropdown-menu> 
 
       \t <li class="menu-text">Foundation Framework</li> 
 
       \t <li><a href="#">Home</a></li> 
 
       \t <li><a href="#">About</a></li> 
 
       \t <li><a href="#">Reference</a></li> 
 
       \t <li><a href="#">About</a></li> 
 
       </ul> 
 
\t    </div> 
 
\t   </div> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="row"> 
 
      <div class="small-12 text-center columns container"> 
 
       <h1>Foundation</h1> <!-- like the h1 centered vertically --> 
 
       <h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically --> 
 
      </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div><!-- Eno of hero-image section --> 
 
\t \t \t </div><!-- off-canvas-content--> 
 
\t \t </div><!-- off-canvas wrapper--> 
 
    <script src="js/vendor/jquery.js"></script> 
 
    <script src="js/vendor/what-input.js"></script> 
 
    <script src="js/vendor/foundation.js"></script> 
 
    <script src="js/app.js"></script> 
 
    </body> 
 
</html>

出典

2017-06-04 23:57:45

私はあなたの例から正当化コンテンツを削除し、今h1とh3完全に中心に置かれている、セドリック。私はなぜこのアイデアをフレックスボックスで使うことができなかったのだろうと思っていましたが、あなたが言及したように100vhが必要です。 – ShortCircuit616

この

h1 { 
    margin: 0; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

} 

h3 { 

    margin: 0; 
    position: absolute; 
    top: 60%; 
    left: 50%; 
    transform: translate(-50%, -50%); 

}

Reference: w3schools

出典

2017-06-05 00:09:40

を試してみてください：あなたはここで例を中心にタイトル

を見るためにあなたのフレキシボックスコンテナに高さを設定する必要があります

flex-gridを使用しているとしますので、行にalign-middleクラスを追加することができます。これにより、属性が追加され、列のコンテンツが中央に垂直に整列されます。 SO

.row { 
 
    max-width: 960px; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    display: flex; 
 
    flex-flow: row wrap; 
 
    
 
    height: 200px; 
 
} 
 

 
.align-middle { 
 
    align-items: center; 
 
} 
 

 
.column, .columns { 
 
    flex: 1 1 0px; 
 
    padding-left: 20px; 
 
    padding-right: 20px; 
 
    min-width: initial; 
 
}

<div class="row align-middle"> 
 
      <div class="small-12 text-center columns"> 
 
       <h1>Foundation</h1> <!-- CAN'T VERTICALLY CENTER THIS TAG --> 
 
       <h3>Foundation For Sites</h3> <!-- CAN'T VERTICALLY CENTER THIS TAG --> 
 
      </div> 
 
       </div>

出典

2017-06-05 06:34:41

私はh1とh3を持っていますが、私はFoundation 6に垂直に中心を置くことができません。

答えて

関連する問題