所以我有
HTML
<div class="avatar">
<img src="$USER_AVATAR_URL$" /><a href="$LOGIN_FORM$" /></a>
</div>
我正在尝试将登录表单与图像右侧对齐。目前它在图像下方。我试过使用文本对齐但没有帮助。那么我该怎么做呢？
CSS
.avatar {
float: right;
background: #242426;
width: 50px;
height: 50px;
border: 5px solid #242426;
border-radius: 50%;
position:absolute;
top: 60px;
right:250px;
}
.avatar img {
display: block;
width: 100%;
border: 0;
margin: 0;
border-radius: 50%;
float:right;
}
最佳答案
您必须仅在链接处设置 float: right; 并将 float: left; 设置为 img
编辑
像这样:
<html>
<head>
<title>Test</title>
<style type="text/css">
.avatar {
background: #242426;
width: 100px;
height: 100px;
border: 5px solid #242426;
border-radius: 50%;
position:absolute;
top: 60px;
right:250px;
float:right;
}
.class_img {
float:left;
display: block;
border: 0;
margin: 0;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="avatar">
<div class="class_img">
<img src="$USER_AVATAR_URL$" />
</div>
<a href="$LOGIN_FORM$" /></a>
</div>
</body>
</html>
关于html - 对齐 <img> 标签内的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16707049/