代码之家  ›  专栏  ›  技术社区  ›  DaveDev

如何对齐这两个元素

  •  1
  • DaveDev  · 技术社区  · 14 年前

    我有一个文本框和一个按钮,下面用HTML/CSS描述。

    当前,这两个元素显示时按钮略低于文本框。有人能建议我怎样把这两个对齐,使它们的中间在同一水平轴上吗?谢谢

    更新: 显然外界看不到这个网站。我将发布一些HTML来描述这些控件

    更新2: 代码如下:

    <div id="SearchForm">
    
        <form method="get" action="/search/Tabs">
    
            <div class="search-box ActionControl">
                <input type="text" value="" name="Search" id="Search">
                <a href="/search/Tabs">Search</a>
            </div>         
    
            <div id="ContentArea"></div>
    
        </form>
    </div>
    
    #SearchForm .search-box
    {
        padding: 25px;
        height: 25px;
    
        background-color: #F6E9D8;
        border: 1px solid #E7DFD0;
    }
    
    #SearchForm .search-box input
    {
        width: 425px;
    }
    
    #SearchForm .search-box a
    {
        background:url("../../Content/images/100/button-M.png") no-repeat scroll 0 0 transparent;
        border:0 none;
        color:White;
        cursor:pointer;
    
        font-size:8pt;
    
        padding-left: 22px;
        padding-right:22px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    
    2 回复  |  直到 14 年前
        1
  •  0
  •   Fenton    14 年前

    #SearchForm .search-box a
    {
        ... (Your existing styles)
        position: relative;
        top: -0.1em;
    }
    

    使用垂直对齐不适用于我,所以这只是填隙片。

        2
  •  0
  •   Bobby Jack    14 年前
    #search, .search-box a { vertical-align: middle; display: inline-block; }