Question

我有一张卡片，里面有按钮（开始按钮），不会转到卡片的中心。

我尝试了center-align课，但那不会做。我也尝试使用我的id和类，并在我的CSS中尝试text-align: center;。但那也不起作用。

不知道我错过了什么。

以下是我所拥有的：

这就是我想要的：

这是完整的html：

      <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link rel="stylesheet" type="text/css" href="css/style.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
        <!--navbar-->
        <header>
        <nav>
          <div class="nav-wrapper light-blue darken-3">
            <a href="#" class="brand-logo center">Kviz</a>
            <!--
            <ul id="nav-mobile" class="left hide-on-med-and-down">
              <li><a href="sass.html">test</a></li>
            </ul>
            -->
          </div>
        </nav>
        </header>

        <main>

        <div class="row">
          <div class="col s12 m12 l6 xl6">
            <div class="card">
              <div class="card-image waves-effect waves-block waves-light">
                <img class="activator" src="images/kvizslika.jpg">
              </div>
              <div class="card-content">
                <span class="card-title activator grey-text text-darken-4">Kako se radi kviz ? 
                <a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
                </span>
              </div>
              <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
                    <p>Here is some more information about this product that is only revealed once clicked on.</p>
                    <div class="card-tabs">
                      <ul class="tabs tabs-fixed-width">
                        <li class="tab"><a class="active" href="#korak1">Poeni</a></li>
                        <li class="tab"><a href="#korak2">Odgovori</a></li>
                        <li class="tab"><a href="#korak3">Vreme</a></li>
                      </ul>
                    </div>
                    <div class="card-content grey lighten-4">
                      <div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
                      <div id="korak2">Test 2</div>
                      <div id="korak3">Test 3</div>
                    </div>
              </div>
            </div>
          </div>

          <div class="col s12 m12 l6 xl6">
            <div class="card">

                      <div class="row">
                        <div class="col s12 m12">
                          <div class="card light-blue darken-3">
                            <div class="card-content white-text">
                              <span class="card-title naslovPrijava">Prijava</span>
                            </div>
                          </div>
                        </div>

                        <div class="col s12 m12">
                          <div class="card">
                            <div class="card-content">
                              <div class="row">
                                <div class="col s6 m6">
                                  <div class="card pomeriKarticu light-blue darken-3 center">
                                    <div class="card-content white-text">
                                      <span class="card-title naslovUcesnik">Učesnik 1:</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            <form>
                              <div class="input-field">
                                <input id="first_name" type="text" class="validate">
                                <label for="first_name">Ime</label>
                              </div>
                              <div class="input-field">
                                 <input id="last_name" type="text" class="validate">
                                 <label for="last_name">Prezime</label>
                              </div>
                            </form> 
                            </div>
                          </div>
                        </div>

                        <div class="col s6 m6">
                          <div class="card">
                            <div class="card-content">
                              <div class="row">
                                <div class="col s6 m6">
                                  <div class="card pomeriKarticu light-blue darken-3 center">
                                    <div class="card-content white-text">
                                      <span class="card-title naslovUcesnik">Učesnik 2:</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            <form>
                              <div class="input-field">
                                <input id="first_name2" type="text" class="validate">
                                <label for="first_name2">Ime</label>
                              </div>
                              <div class="input-field">
                                 <input id="last_name2" type="text" class="validate">
                                 <label for="last_name2">Prezime</label>
                              </div>
                            </form> 
                            </div>
                          </div>
                        </div>

                        <div class="col s6 m6">
                          <div class="card">
                            <div class="card-content">
                              <div class="row">
                                <div class="col s6 m6">
                                  <div class="card pomeriKarticu light-blue darken-3 center">
                                    <div class="card-content white-text">
                                      <span class="card-title naslovUcesnik">Učesnik 3:</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            <form>
                              <div class="input-field">
                                <input id="first_name3" type="text" class="validate">
                                <label for="first_name3">Ime</label>
                              </div>
                              <div class="input-field">
                                 <input id="last_name3" type="text" class="validate">
                                 <label for="last_name3">Prezime</label>
                              </div>
                            </form> 
                            </div>
                          </div>
                        </div>

                      </div>
                      <button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
                        <i class="material-icons right">send</i>
                      </button>

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

        </main>

        <footer class="page-footer  light-blue darken-4">
          <div class="footer-copyright">
            <div class="container">
            <center> © 2017 VTŠ Apps Team </center>
            </div>
          </div>
        </footer>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
    </body>
  </html>

这是完整的CSS：

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    background-color: rgb(232,232,232);
  }

main {
    flex: 1 0 auto;
  }

.tabs .tab a{
    color:#00ACC1;
}
.tabs .tab a:hover,.tabs .tab a.active {
    background-color:transparent;
    color:#00ACC1;
}
.tabs .tab.disabled a,.tabs .tab.disabled a:hover {
    color:rgba(102,147,153,0.7);    
}
.tabs .indicator {
    background-color:#00ACC1;
}


.naslovPrijava{
    font-size: 20px !important; 
    text-align: center;
    height: 18px;
}


.naslovUcesnik{
    font-size: 18px !important; 
    text-align: left;
    margin-left:-15px;
    margin-top: -15px;
}

.pomeriKarticu{
    margin-left:-35px;
    height: 50px;


}

.dugmeStart{
text-align: center;

}

Answer 1

您必须在按钮的父元素上使用center-align类，因此我添加了父class="center-align"

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: rgb(232, 232, 232);
}

main {
  flex: 1 0 auto;
}

.tabs .tab a {
  color: #00ACC1;
}

.tabs .tab a:hover,
.tabs .tab a.active {
  background-color: transparent;
  color: #00ACC1;
}

.tabs .tab.disabled a,
.tabs .tab.disabled a:hover {
  color: rgba(102, 147, 153, 0.7);
}

.tabs .indicator {
  background-color: #00ACC1;
}

.naslovPrijava {
  font-size: 20px !important;
  text-align: center;
  height: 18px;
}

.naslovUcesnik {
  font-size: 18px !important;
  text-align: left;
  margin-left: -15px;
  margin-top: -15px;
}

.pomeriKarticu {
  margin-left: -35px;
  height: 50px;
}

.dugmeStart {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!--Let browser know website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>

<body>
  <!--navbar-->
  <header>
    <nav>
      <div class="nav-wrapper light-blue darken-3">
        <a href="#" class="brand-logo center">Kviz</a>
        <!--
            <ul id="nav-mobile" class="left hide-on-med-and-down">
              <li><a href="sass.html">test</a></li>
            </ul>
            -->
      </div>
    </nav>
  </header>

  <main>

    <div class="row">
      <div class="col s12 m12 l6 xl6">
        <div class="card">
          <div class="card-image waves-effect waves-block waves-light">
            <img class="activator" src="images/kvizslika.jpg">
          </div>
          <div class="card-content">
            <span class="card-title activator grey-text text-darken-4">Kako se radi kviz ? 
                <a class="waves-effect light-blue darken-3 btn activator right">Instrukcije</a>
                </span>
          </div>
          <div class="card-reveal">
            <span class="card-title grey-text text-darken-4">Instrukcije<i class="material-icons right">close</i></span>
            <p>Here is some more information about this product that is only revealed once clicked on.</p>
            <div class="card-tabs">
              <ul class="tabs tabs-fixed-width">
                <li class="tab"><a class="active" href="#korak1">Poeni</a></li>
                <li class="tab"><a href="#korak2">Odgovori</a></li>
                <li class="tab"><a href="#korak3">Vreme</a></li>
              </ul>
            </div>
            <div class="card-content grey lighten-4">
              <div id="korak1">Test 1. Bla bla. <br/> Bla bla.</div>
              <div id="korak2">Test 2</div>
              <div id="korak3">Test 3</div>
            </div>
          </div>
        </div>
      </div>

      <div class="col s12 m12 l6 xl6">
        <div class="card">

          <div class="row">
            <div class="col s12 m12">
              <div class="card light-blue darken-3">
                <div class="card-content white-text">
                  <span class="card-title naslovPrijava">Prijava</span>
                </div>
              </div>
            </div>

            <div class="col s12 m12">
              <div class="card">
                <div class="card-content">
                  <div class="row">
                    <div class="col s6 m6">
                      <div class="card pomeriKarticu light-blue darken-3 center">
                        <div class="card-content white-text">
                          <span class="card-title naslovUcesnik">Učesnik 1:</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <form>
                    <div class="input-field">
                      <input id="first_name" type="text" class="validate">
                      <label for="first_name">Ime</label>
                    </div>
                    <div class="input-field">
                      <input id="last_name" type="text" class="validate">
                      <label for="last_name">Prezime</label>
                    </div>
                  </form>
                </div>
              </div>
            </div>

            <div class="col s6 m6">
              <div class="card">
                <div class="card-content">
                  <div class="row">
                    <div class="col s6 m6">
                      <div class="card pomeriKarticu light-blue darken-3 center">
                        <div class="card-content white-text">
                          <span class="card-title naslovUcesnik">Učesnik 2:</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <form>
                    <div class="input-field">
                      <input id="first_name2" type="text" class="validate">
                      <label for="first_name2">Ime</label>
                    </div>
                    <div class="input-field">
                      <input id="last_name2" type="text" class="validate">
                      <label for="last_name2">Prezime</label>
                    </div>
                  </form>
                </div>
              </div>
            </div>

            <div class="col s6 m6">
              <div class="card">
                <div class="card-content">
                  <div class="row">
                    <div class="col s6 m6">
                      <div class="card pomeriKarticu light-blue darken-3 center">
                        <div class="card-content white-text">
                          <span class="card-title naslovUcesnik">Učesnik 3:</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <form>
                    <div class="input-field">
                      <input id="first_name3" type="text" class="validate">
                      <label for="first_name3">Ime</label>
                    </div>
                    <div class="input-field">
                      <input id="last_name3" type="text" class="validate">
                      <label for="last_name3">Prezime</label>
                    </div>
                  </form>
                </div>
              </div>
            </div>

          </div>
          <div class="center-align">
            <button class="btn-large waves-effect waves-light light-blue darken-3 dugmeStart" type="submit" name="action">Start
                        <i class="material-icons right">send</i>
                      </button>
          </div>

        </div>
      </div>
    </div>
    </div>

  </main>

  <footer class="page-footer  light-blue darken-4">
    <div class="footer-copyright">
      <div class="container">
        <center> © 2017 VTŠ Apps Team </center>
      </div>
    </div>
  </footer>
  <!--Import jQuery before materialize.js-->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
</body>

</html>

Answer 2

您也可以使用保证金来实现这一目标

.dugmeStart {
    text-align: center;
    display: block;/**Added This**/
    margin: 0 auto; /**Added This**/
}

实现 - 卡中的按钮不会成为中心

2 个答案: