垂直对齐CSS网格项

Question

我正在使用CSS网格使我的网站标题对移动友好。我寻找了一种方法，将我的一列垂直对齐到中间。这篇文章通过使列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>