Question

我正在使用CSS网格使网站的标题移动友好。我寻找一种方法来将我的一列垂直对齐到中间。 This post通过创建列display: flex来回答这一问题，但是引入了一个问题，当我将鼠标悬停在框内的链接上时，框会调整大小并在其中移动文本。

我的代码：

h1 {
  color: white;
  font-family: garamond;
  font-size: 3vw;
  width: 90%;
  line-height: 5%;
}
header {
  background-color: darkred;
  position: relative;
  padding: 1px;
  padding-bottom: 1em;
}
.Logo-Master {
  width: 15vw;
  margin: 1em;
}
header h1 {
  color: white;
}
#newsCenter {
  text-align: center;
  font-size: 1vw;
  color: white;
  text-decoration: none;
}
#newsCenter p a {
  color: white;
  font-size: .9vw;
  font-weight: normal;
}
#newsCenter p a:hover {
  font-weight: bold;
}
.newsCenterValues {
  font-size: 1em;
}

<header style="display: grid; grid-template-rows: auto auto;">
  <div style="display: inline-grid; grid-template-columns: 1fr 4fr 1fr">
  <a href="../index.html"><img class="Logo-Master" src="https://static.nationalgeographic.co.uk/files/styles/image_3200/public/01-lion-populations-nationalgeographic_1777804.jpg?w=1600&h=900" alt="This is an image"></a>
  <div>
    <h1>Title Title Title Title Title Title Title Title</h1>
  </div>
  <div style="display: flex; align-items: center;"><div id="newsCenter">
    <p style="font-size: 1.2rem; font-weight: bold; color: white; line-height: 0;">Flex</p>
    <p class="newsCenterValues" style="line-height: 0;"><a href="#">The Long Link that in this section</a></p>
  </div></div>
  </div>
</header>

flex列中的文本应该为text-align: center;，但其行为并非如此。当我将鼠标悬停在它上面时，如何解决它仍然变粗呢？

Answer 1

h1 {
  color: white;
  font-family: garamond;
  font-size: 3vw;
  width: 90%;
  line-height: 5%;
}
header {
  background-color: darkred;
  position: relative;
  padding: 1px;
  padding-bottom: 1em;
}
.Logo-Master {
  width: 15vw;
  margin: 1em;
}
header h1 {
  color: white;
}
#newsCenter {
  text-align: center;
  font-size: 1vw;
  color: white;
  text-decoration: none;
}
#newsCenter p a {
  color: white;
  font-size: .9vw;
  font-weight: normal;
}
#newsCenter p a:hover {
  font-weight: bold;
}
.newsCenterValues {
  font-size: 1em;
}

<header style="display: grid; grid-template-rows: auto auto;">
  <div style="display: inline-grid; grid-template-columns: 1fr 4fr 1fr">
  <a href="../index.html"><img class="Logo-Master" src="https://static.nationalgeographic.co.uk/files/styles/image_3200/public/01-lion-populations-nationalgeographic_1777804.jpg?w=1600&h=900" alt="This is an image"></a>
  <div>
    <h1>Title Title Title Title Title Title Title Title</h1>
  </div>
  <div style="display: flex; align-items: center;justify-content: center;"><div id="newsCenter">
    <p style="font-size: 1.2rem; font-weight: bold; color: white; line-height: 0;">Flex</p>
    <p class="newsCenterValues" style="line-height: 0;"><a href="#">The Long Link that in this section</a></p>
  </div></div>
  </div>
</header>

Answer 2

这不会移动内容。在此示例中，我使用了transform: scale()。

h1 {
  color: white;
  font-family: garamond;
  font-size: 3vw;
  width: 90%;
  line-height: 5%;
}
header {
  background-color: darkred;
  position: relative;
  padding: 1px;
  padding-bottom: 1em;
}
.Logo-Master {
  width: 15vw;
  margin: 1em;
}
header h1 {
  color: white;
}
#newsCenter {
  text-align: center;
  font-size: 1vw;
  color: white;
  text-decoration: none;
  transition: .2s;
}
#newsCenter p a {
  color: white;
  font-size: .9vw;
  font-weight: normal;
}
#newsCenter:hover {
  transform: scale(1.1);
}
.newsCenterValues {
  font-size: 1em;
}

<header style="display: grid; grid-template-rows: auto auto;">
  <div style="display: inline-grid; grid-template-columns: 1fr 4fr 1fr">
  <a href="../index.html"><img class="Logo-Master" src="https://static.nationalgeographic.co.uk/files/styles/image_3200/public/01-lion-populations-nationalgeographic_1777804.jpg?w=1600&h=900" alt="This is an image"></a>
  <div>
    <h1>Title Title Title Title Title Title Title Title</h1>
  </div>
  <div style="display: flex; align-items: center;"><div id="newsCenter">
    <p style="font-size: 1.2rem; font-weight: bold; color: white; line-height: 0;">Flex</p>
    <p class="newsCenterValues" style="line-height: 0;"><a href="#">The Long Link that in this section</a></p>
  </div></div>
  </div>
</header>

垂直对齐CSS网格项

2 个答案: