0
votes

CSS - Alignez le texte, l'entrée et l'image dans DIV

J'essaie d'aligner du texte, ainsi que du champ de saisie et une image d'environ 25x25 px

ce que je reçois est le texte et l'image en haut de la DIV et l'entrée légèrement plus basse. P >

Comment puis-je les aligner afin qu'ils soient tous verticalement les uns avec les autres. P>

C'est ce que j'ai jusqu'à présent: P>

div.block {overflow:hidden; border:1px solid #000 }
div.block label {width:150px; display:block; float:left; text-align:left; vertical-align:middle; }
div.block.input {margin-left:4px; float:left; vertical-align:middle; }

html css alignment image input

0 commentaires

4 Réponses :

0
votes

Ceci est pour horizontal fort>:

<div class='block'> <label>Test Label</label> <input type='text' value='1234567890'/> <img src='http://placekitten.com/301/301'/> </div>

0 commentaires

0
votes

Essayez d'ajouter Position: absolu et Affichage: flex à l'intérieur de votre div.block. Cela devrait faire l'affaire si je comprends votre question correctement.



                                                                    
                                    
                                    
                                        0 commentaires


                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                     Je vous conseillerais vivement d'utiliser Flexbox. 
 peut être un peu déroutant au début, mais une fois que vous avez eu la pendre, vous l'aimerez.
Ici vous pouvez trouver un guide parfait pour l'utiliser. 

 https://css-tricks.com/snippets/css/a -Guide-to-Flexbox /   P> 
 Quelque chose comme ça (juste écrit de mon esprit, donc non testé)
Essayez d'enlever vos classes en premier.  P> 
 votre CSS  P> 
<div style="flex border">
    <img src='image.png'/>
    <label>Test Label</label>
    <input type='text' value='1234567890'/>
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires
                                        
                                                                                    
                                    
                                                            
                        
                        
                                            
                            
                                
                                    0
 votes
                                
                            
                            
                                
                                      peu de problèmes  forts> 

 Ce  div.block.input  code> ne sélectionne rien de pour que tous ces styles ne soient pas utilisés  li>
 Vous avez créé l'étiquette un élément de niveau de bloc afin qu'il ne réponde pas à la propriété  vertical-align  code>.  Li>
 ol>  le    code> et le    code> sont des éléments en ligne afin de partager la même boîte dans laquelle ils vivent, leur alignement vertical sera Soyez défini par la propriété  vertical-align  code>.  p> 
 La valeur par défaut pour  vertical-align  code> La propriété est la ligne de base:  p> 

 Alignez la base de la boîte avec la base de la boîte mère. Si la boîte n'a pas de ligne de base, alignez le bord de la marge inférieure avec la ligne de base du parent.  P>
 blockQuote> 
 Dans ce cas, nous avons un    code> qui n'a pas de base, il sera donc aligné sur la base de sa marge inférieure, dans notre cas, l'IMG n'a pas de marge Donc, c'est fondamentalement le bord inférieur.  p> 
 l'entrée    code> a une base de référence, donc sa ligne de base sera alignée avec le bord inférieur de l'IMG à côté.  P > 
 Démo  h2> 
  p> 


<div class='block'>
  <label>Test Label</label>
  <input type='text' value='1234567890' />
  <img src='https://i.picsum.photos/id/527/25/25.jpg' />
</div>

                                

                                                                    
                                    
                                    
                                        0 commentaires