如何對齊文本元素？

Question

我正在制作一個用於登錄的網頁。我有一個文本元素“ 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 &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 在這里可用。

Answer 1

我在CSS中添加了以下內容：

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

現在應該看起來像這樣，除了實際圖像，大聲笑。

編輯

另外，我很確定在CSS的頂部列出了所有內容，然后執行以下操作：

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

如果是這樣，則只需將其替換為星號（*）。 這只會為您節省大約。 490個字符，因此加載速度會稍快。

Answer 2

首先，從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