如何解决垂直对齐CSS网格项
我正在使用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;
,但其行为并非如此。当我将鼠标悬停在它上面时,如何解决它仍然变粗呢?
解决方法
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>
,
这不会移动内容。在此示例中,我使用了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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。