所以我的CSS出现了这个问题,我无法在图像中内联显示文本链接。链接相对于我的图片处于不同的高度?问题可能是什么?我尝试使用不同的对齐方法,例如垂直对齐等。
也许我应该重写整个代码?
html,
body {
font-family: 'Open Sans', sans-serif;
background-color: #efefef;
}
body{
margin: 0;
}
.left_div {
margin: 0;
padding: 0;
width: 25%;
background-color: #fff;
position: fixed;
height: 100%;
overflow: auto;
text-align: center;
}
.left_div img {
width: 50%;
height: auto;
margin: 2vh 0 2vh 0;
}
.left_div a {
display: block;
color: black;
background-color: rgb(217, 50, 141);
padding: 16px;
text-decoration: none;
width: 75%;
margin: 2vh auto;
border-radius: 5px;
color: rgb(255, 255, 255);
transition: all .2s ease-in-out;
}
.left_div a.active {
background-color: rgb(65, 29, 100);
color: white;
}
.left_div a:hover:not(.active) {
background-color: rgb(153, 22, 94);
color: white;
}
@media screen and (min-width: 765px) and (max-width: 968px) {
.left_div {
width: 100%;
height: auto;
position: relative;
text-align: left;
}
.left_div img {
width: 12.5%;
height: auto;
margin: 0 0 0 2vw;
}
.left_div a {
display: inline;
color: black;
background-color: rgb(217, 50, 141);
padding: 16px;
text-decoration: none;
margin: 0 auto;
border-radius: 5px;
color: rgb(255, 255, 255);
transition: all .2s ease-in-out;
}
}
@media screen and (max-width: 765px) {
.left_div {
width: 100%;
height: auto;
position: relative;
}
.left_div a {
text-align: center;
float: none;
}
}
<!-- HTML -->
<div class="left_div">
<img src="img/mlp_logo.png" alt="My Little Pony Logo">
<a class="active" href="#">Home</a>
<a href="#">News</a>
<a href="#">Contact</a>
<a href="#">About</a>
</div>
这里是一个显示问题的jsfiddle。
谢谢!
编辑(添加屏幕截图)
https://imgur.com/hwbmAKR如您在屏幕快照中所见,图像和文本在高度方向上未对齐。
由@ SaschaM78解决。
我认为您希望标签与图像垂直对齐,对吗?如果是这样,请添加vertical-align:middle;到.left_div img。可以在这里找到更新的小提琴-@ SaschaM78
谢谢!我有一点菜鸟错误。
正如评论中已经提到的,设置适当的垂直对齐可以达到目的:
解决方案要添加:
.left_div img {
vertical-align: middle;
}