Centrer DIV

Bonjour, je viens de créer un petit menu de réseaux sociaux, auquel j'ai ajouté une barre de recherche automatique (qui descend lorsque l'on clique sur l'icône de la loupe)

j'ai réussi à faire tout ce que je voulais, sauf centrer la loupe au même niveau que les autres icônes et qu'elle soit responsive de la même façon.

Voici mon blog pour l'exemple http://morganesfairy.fr

et mon code html et css

<div id="socicon">
<a href="https://www.facebook.com/morganesfairy/" title="Facebook" target="_blank" rel="nofollow"><i class="socicon-facebook"></i></a>
<a href="https://www.instagram.com/morganesfairy/" title="Instagram" target="_blank" rel="nofollow"><i class="socicon-instagram"></i></a>
<a href="http://www.hellocoton.fr/mapage/morganesfairy" title="Hellocoton" target="_blank" rel="nofollow"><i class="socicon-hellocoton"></i></a>
<a href="https://plus.google.com/104635093783142325027?hl=fr" title="Google Plus" target="_blank" rel="nofollow"><i class="socicon-googleplus"></i></a>
<a href="https://fr.pinterest.com/morganesfairy/" title="Pinterest" target="_blank" rel="nofollow"><i class="socicon-pinterest"></i></a>
<a href="https://www.flickr.com/photos/148180457@N03/" title="Flickr" target="_blank" rel="nofollow"><i class="socicon-flickr">
</i></a>

<div id='top-search'>
<a href='#'><i class='fa fa-search'/></i></a>
</div>
<div class='show-search'>
<form action='/search' id='searchthis' method='get' role='search'>
<div>
<input id='s' name='q' placeholder='rechercher' type='text'/>
</div></form></div>

</div>

#top-search {
position: absolute;
		right:0;
		top: -1px;
		width:48px;
		text-align:center;
		margin-left:16px;


	}
	#top-search a {
		font-size:18px;
		line-height:55px;
		color:#999999;
		-webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
         -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
	}
	#top-search a:hover {
		color:#bcbcbc;
		
	}
	.show-search {
		display:none;
		z-index:10000;
text-align: center;
	}
	.show-search #searchthis input#s {
		width: 100%;
position: relative;

		background:#f3f3f3;
    color: #666666;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
border: none;
padding: 6px;
margin-top: 15px;
outline: none;
text-align: center;
}

#HTML16 {
background-color: #f3f3f3;
padding: 1px;
    margin-top: 0px;
}
#socicon {
font-size: 18px;
letter-spacing: 16px;
text-align: center;
margin: 15px;
}
@media screen and (max-width: 400px){ 
#socicon {
font-size: 15px;
letter-spacing: 10px;
text-align: left;
margin: 15px;
}
#top-search a {
font-size: 15px;
}

Merci beaucoup, je sèche complètement ça fait des heures que je suis dessus..

cordialement,
Morgane
Modifié par morganesfairy (06 May 2017 - 01:20)

Bonjour,

Le HTML n'est pas idéal mais essayez quelque chose du genre:

retirer sur la div #top-search la position: absolute et ajouter 'display: inline-block';

Bonjour, merci pour votre réponse mais ça ne fonctionne pas désolée..
J'avais réussi à faire en sorte que tout soit centré comme je voulais mais les icônes de réseaux sociaux ne fonctionnaient plus, lorsque je cliquais dessus ils ouvraient aussi la barre de recherche.. mais je ne me souviens plus comment j'avais fait ça !

Ne fonctionne pas non plus désolée merci merci quand même..