如何对齐文本元素？

Question

I'm making a webpage for logging in. I have a text element "OR LOG IN WITH" for different providers that I want to align up with the images (google...). 我正在制作一个用于登录的网页。我有一个文本元素“ OR LOG IN WITH”，用于要与图像对齐的其他提供程序（google ...）。 I tried setting it vertical align top in CSS but that did not work. 我尝试在CSS中将其设置为垂直对齐顶部，但这没有用。 Can you help me? 你能帮助我吗？

在此处输入图片说明

<!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 &amp;
        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 is available here . CSS 在这里可用。

Answer 1

I added in CSS this: 我在CSS中添加了以下内容：

.logintext2 {
    position: relative;
    top: -15px;
}

it should look like this now, except with actual images, lol. 现在应该看起来像这样，除了实际图像，大声笑。

EDIT 编辑

Also, I'm pretty sure that at the top of your CSS you have everything listed and then have this: 另外，我很确定在CSS的顶部列出了所有内容，然后执行以下操作：

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;

if it is, you can just replace it with an asterisk (*). 如果是这样，则只需将其替换为星号（*）。 This just saves you approx. 这只会为您节省大约。 490 characters, so it will load slightly faster. 490个字符，因此加载速度会稍快。

Answer 2

First of all remove this class "logintext2" from div tag, And it to td class ="logintext2" and replace this style 首先，从div标签中删除此类"logintext2" ，然后将其替换为td class ="logintext2"并替换此样式

.logintext2 {
  vertical-align: top;
}

如何对齐文本元素？

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-04-08 05:11:20

解决方案2
0 2015-04-08 05:17:30

如何对齐文本元素？

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-04-08 05:11:20

解决方案2 0 2015-04-08 05:17:30

解决方案1
1 已采纳 2015-04-08 05:11:20

解决方案2
0 2015-04-08 05:17:30