Comment puis-je aligner ces deux éléments

J'ai une zone de texte et un bouton, qui est décrit avec le code HTML/CSS ci-dessous.Comment puis-je aligner ces deux éléments

Actuellement, ces deux éléments apparaissent avec le bouton légèrement plus bas que la zone de texte. Quelqu'un peut-il suggérer comment je peux obtenir ces deux alignés de sorte que leurs milieux sont sur le même axe horizontal? Merci

mise à jour: apparemment le monde extérieur ne peut pas voir ce site. Je vais poster quelques HTML décrivant les contrôles peu

mise à jour 2: Voici le code:

<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; 
}

Source

2010-08-23 DaveDev

Je ne peux pas accéder à votre page d'exemple. Message d'erreur: "Le serveur Web que vous essayez d'atteindre a une liste d'adresses IP qui ne sont pas autorisées à accéder au site Web, et l'adresse IP de votre ordinateur de navigation figure dans cette liste" –

@piquadrat - merci de le signaler . Je suppose que les SysAdmins ont mis en place un filtrage IP sur cette boîte ... ce serait pratique si vous pouviez le voir! – DaveDev

@piquadrat - mis à jour. Merci – DaveDev

C'est une solution rapide ... il était seulement un pixel à mon yeux ...

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

L'utilisation de l'alignement vertical ne fonctionne pas pour moi, donc cela ne fait que l'ajuster.

Source

2010-08-23 12:08:46 Fenton

Cela ne s'alignera pas lorsque la taille de la police est modifiée –

L'utilisation de mesures em résout ce problème. Exemple mis à jour et testé à de nombreux zooms de texte différents dans Firefox. – Fenton

Dans quel navigateur n'a pas aligné le travail? Fonctionne dans FF et devrait fonctionner dans IE 8. Dans ce cas, l'alignement vertical est probablement non critique, donc je dirais que c'est «assez bon» –

#search, .search-box a { vertical-align: middle; display: inline-block; }

Source

2010-08-23 12:08:01

Comment puis-je aligner ces deux éléments

Répondre

Questions connexes