[英]How can I align my text element?
我正在制作一个用于登录的网页。我有一个文本元素“ OR LOG IN WITH”,用于要与图像对齐的其他提供程序(google ...)。 我尝试在CSS中将其设置为垂直对齐顶部,但这没有用。 你能帮助我吗?
<!DOCTYPE html>
<html dir="ltr" lang="en-IN" class="js">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta name="description"
content="Find free ads about all different kind of items for sale in {% if regionname and regionname != 'None' %}{{regionname}}{% else %}{% if cityname and cityname != 'None' %}{{cityname}}{% else %}{% if country and country != 'None' %}{{country}}{% endif %}{% endif %}{% endif %}">
<meta name="googlebot" content="noarchive">
{% if cursor %}
<link rel="next" href="/delhi/?o=2">
{% endif %}
<link rel="canonical" href="/q">
<title>Login / Create</title>
<!-- CSS INCLUDES: -->
<link href="/static/css/koolindex_in.css?{{VERSION}}" rel="stylesheet" type="text/css">
<!-- HEADEXTRAS: -->
<link rel="icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<!--
<link rel="shortcut icon" href="/img/favicon_in.ico?07217" type="image/x-icon">
<link rel="shortcut icon" href="/img/favicon_in.png?07217" type="image/png">
<link rel="apple-touch-icon" href="/img/favicon_ios_in.png?07217" type="image/png">
<link rel="icon" href="/img/favicon_us.ico?51340" type="image/x-icon">
<link href="https://plus.google.com/123122342342345" rel="publisher">-->
<!-- JAVASCRIPTS: -->
<script type="text/javascript" src="/static/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/static/js/common.min.js"></script>
<script type="text/javascript" src="/static/js/arrays_v2.js"></script>
<script type="text/javascript" src="/static/js/searchbox.min.js"></script>
</head>
<body>
{% include "kooltopbar.html" %}
<div id="wrapper">
{% if request.host == "www.koolbusiness.com" %}
<a href="/">
<h1 id="logo" class="sprite_index_in_in_en_logo spritetext">koolbusiness.com - The right choice for buying &
selling in india</h1></a>
{% endif %}
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- v2 -->
<ins class="adsbygoogle"
style="display:inline-block;width:728px;height:15px"
data-ad-client="ca-pub-7211665888260307"
data-ad-slot="9119838994"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<div id="border1"></div>
<div id="searchbox">
<form id="search_form" action="/account/do_login" method="post">
<table><tr><td>
LOG IN</td><td>
<input name="email" size="35" title="email" type="text"
></td><td> <input name="password" size="35" title="password" type="password"
>
</td><td>
<input value="Login" type="submit"></td>
</tr>
<tr><td>
</td><td><div class="logintext">YOUR E-MAIL</div></td><td><div class="logintext"> PASSWORD</div></td><td>
</tr></form >
<form autocomplete="off" id="create_user" action="/create/" method="post">
<tr><td>
CREATE ACCOUNT
</td><td> <input name="email" value="" size="35" title="email" type="text"
></td><td> <input name="password" value="" size="35" title="password" type="password"
>
</td><td>
<input value="Create Account" type="submit"></td>
</tr> <tr><td>
</td><td><div class="logintext"> YOUR E-MAIL</div></td><td><div class="logintext"> DESIRED PASSWORD</div></td><td>
</tr> <tr><td><div class="logintext2">
OR LOG IN WITH</div> </td><td><a href="/auth/google"><img id="googlelink" alt="Login with google" src="/_/img/transparent.gif"></a><a href="/auth/linkedin"> <img id="linkedinlink" alt="Login with linkedin" src="/_/img/transparent.gif"></a></td><td><a href="/auth/yahoo"><img id="yahoolink" alt="Login with yahoo" src="/_/img/transparent.gif"> </a><a href="/auth/facebook"> <img id="facebooklink" alt="Login with facebook" src="/_/img/transparent.gif"></a> </td><td></td></tr>
</table>
</form>
</div>
<div id="recover"><a href="/passwordreset/"><div class="reminderlink">CLICK HERE TO RECOVER YOUR ACCOUNT</div></A></div>
</div>
</body>
</html>
CSS 在这里可用。
我在CSS中添加了以下内容:
.logintext2 {
position: relative;
top: -15px;
}
现在应该看起来像这样 ,除了实际图像,大声笑。
编辑
另外,我很确定在CSS的顶部列出了所有内容,然后执行以下操作:
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
如果是这样,则只需将其替换为星号(*)。 这只会为您节省大约。 490个字符,因此加载速度会稍快。
首先,从div标签中删除此类"logintext2"
,然后将其替换为td class ="logintext2"
并替换此样式
.logintext2 {
vertical-align: top;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.