gpt4 book ai didi

html - 如何在 中垂直居中

转载 作者:太空宇宙 更新时间:2023-11-03 20:35:07 26 4
gpt4 key购买 nike

不好意思打扰大家

我无法解决这个问题,它伤害了我的大脑。

我有一个 <a>标签,里面是一个 <p><img> .我想要 <p> 的内容当我将鼠标悬停在图像上时垂直居中。

image goes here

请在下面找到我的 html 和 css。

再次感谢

    html,
body {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
background-color: #f1f1f1;
/*Text Selection cancelled - unable to select text*/
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#profpic {
opacity: 0;
transition: 1s;
}
table {
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.user {
width: 200px;
height: 200px;
border-radius: 50%;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-image: url('sir.png');
-webkit-transition: all 0.5s ease-out 0s;
-moz-transition: all 0.5s ease-out 0s;
-ms-transition: all 0.5s ease-out 0s;
-o-transition: all 0.5s ease-out 0s;
transition: all 0.5s ease-out 0s;
}
.user:hover {
opacity: 0.6;
background: rgba(0, 0, 0, 0.5);
-webkit-opacity: 0.25;
-moz-opacity: 0.25;
opacity: 0.25;
}
#a-tag {
position: relative;
display: inline-block;
}
#a-tag #profpic {
border-radius: 50%;
background: rgba(0, 0, 0, 0.5);
text-align: center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: 0;
color: #fff;
opacity: 0;
transition: 1s;
}
#a-tag:hover #profpic {
opacity: 1;
}
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>Create User in Database</title>
<link rel="stylesheet" href="adduser.css">
<link rel="shortcut icon" type="image/png" href="Raspberry_Pi.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<body>
<div id="signup">
<table>
<tr>
<th>
<form action="addrecord.php" method="post">
<input type="text" name="username" value="Username">
<br>
<br>
<input type="text" name="fullname" value="Fullname">
<br>
<br>
<input type="text" name="email" value="Email Address">
<br>
<br>
<input type="text" name="password" value="Password">
<br>
<br>
<input type="submit" value="Submit">
</form>
</th>
<th>
<!-- Something to choose a profile picture -->

<a id="a-tag" href="#">
<p id="profpic">choose Profile Pic</p>
<img class="user" src="sir.png" height="190" width="190">
</a>

</th>
</tr>
</table>
</div>

<script>
$(document).ready(function() {

}); // end document.ready
</script>
</body>

</html>

最佳答案

您可以像这样向#profpic id 添加一些填充

#a-tag:hover #profpic{
padding-top:95px;
opacity:1;
}

这是一个 JsFiddle

关于html - 如何在 <a> 中垂直居中 <p>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34717103/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com