Question

对于这个Material Design Lite网站，我从基础Portfolio Template开始。我想修改标题部分，因为我不希望它是屏幕的整个宽度，但对于我的生活，我无法弄清楚要修改哪些CSS类。

这是HTML：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.pink-indigo.min.css" />

...

        <header class="mdl-layout__header mdl-layout__header--waterfall portfolio-header">
            <div class="mdl-layout__header-row portfolio-logo-row">
                <span class="mdl-layout__title">
                    <div class="portfolio-logo"></div>
                    <!-- <span class="mdl-layout__title">Finishing Touch</span> -->
                </span>
            </div>
            <div class="mdl-layout__header-row portfolio-navigation-row mdl-layout--large-screen-only">
                <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                    <a class="mdl-navigation__link" href="index.html">Home</a>
                    <a class="mdl-navigation__link is-active" href="about.html">About</a>
                    <a class="mdl-navigation__link" href="products.html">Products</a>
                    <a class="mdl-navigation__link" href="contact.html">Contact</a>
                </nav>
            </div>
        </header>
        <div class="mdl-layout__drawer mdl-layout--small-screen-only">
            <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                <a class="mdl-navigation__link" href="index.html">Home</a>
                <a class="mdl-navigation__link is-active" href="about.html">About</a>
                <a class="mdl-navigation__link" href="products.html">Products</a>
                <a class="mdl-navigation__link" href="contact.html">Contact</a>
            </nav>
        </div>

这是我的CSS：

/*
.mdl-layout__header {
  width: 65%;
}
*/

/* Background image for header section above menu bar */
.portfolio-header {
  position: relative;

  background-image: url(../images/pink-polka-dot-header-bg.jpg); /* SFT */
}

.portfolio-header .mdl-layout__header-row {
  padding: 0;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.mdl-layout__title {
  font-size: 14px;
  text-align: center;
  font-weight: 300;
}

.is-compact .mdl-layout__title span {
  display: none;
}

/* Height for header section */
.portfolio-logo-row {
  min-height: 250px; /* SFT */
}

.is-compact .portfolio-logo-row {
  min-height: auto;
}

/* Main SFT Logo - large screen size */
.portfolio-logo {
  background: url(../images/sft-logo.png) 50% no-repeat; /* SFT */
  background-size: cover;
  /* height: 327px; /* SFT */
  /* width: 600px; /* SFT */
  height: 250px;  /* SFT */
  width: 469px;  /* SFT */
  margin: auto auto 10px;
}

/* Main SFT Logo - small screen size */
.is-compact .portfolio-logo {
  height: 79px;  /* SFT */
  width: 150px;  /* SFT */
  margin-top: 7px;
}

我首先尝试添加“宽度：70％;” .mdl-layout__header和.portfolio-header类的元素，但是没有用。它调整了宽度，然后标题不会保持居中：

没有宽度元素： Screenshot showing fullscreen width

使用宽度元素： Screenshot showing width element adjusted to 65%

我已经尝试过使用“position”元素以及这两个类，但是，没有一个获得标题然后居中。我有点不知道接下来要去哪儿看看。有任何想法吗？谢谢！

Answer 1

好的，我在朋友的帮助下想出来了。对于portfolio-header CSS类，我需要添加以下两行来使它工作：

  max-width: 70%;
  margin: 0 auto;

一切现在都有效！

Material Design Lite - 投资组合模板 - 调整标题宽度

1 个答案: