I have a h1, and a h3 that I can't vertically center in Foundation 6

时间：2017-06-04 23:47:51

标签： css zurb-foundation

I've tried to everything to vertically center my h1 and h3 tag in Foundation 6. I've tried the transform translate, flexbox, and tried multiple examples here on stack over flow, and nothing works. When I use absolute positioning to center the content the, the headings get in the way of the top-bar nav on smaller screens, id there anyway to fix this issue, and Could some give me a hand with this? The h1 tag, and the h3 tag are located in line 48, and 49 of my codepen. Codepen link

<!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>

3 个答案:

答案 0 :(得分：0)

你可以使用flexbox;您需要为Flexbox容器设置高度以查看居中标题

这里有一个例子：https://codepen.io/anon/pen/YQPPaM

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

}
.container{
  height : 100vh;
  display: flex;
  flex-direction : column;
  justify-content : center;
  align-items : center;
  
}
＆＃13; 
<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 container"> 
              <h1>Foundation</h1> <!-- like the h1 centered vertically -->
              <h3>Foundation For Sites</h3> <!-- like to have the h3 centered vertically -->
            </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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

试试这个

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

答案 2 :(得分：0)

我想您正在使用flex-grid，因此您只需将align-middle类添加到您的行中即可。这将添加align-items: center;属性，并将列的内容垂直对齐在中心。

.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>

相关问题
最新问题