28172 sujets

CSS et mise en forme, CSS3

Alignement 3 texte +3 image sur même ligne

Bonjour,

J'ai une galère j'aimerai positionner trois textes avec une image au dessus de chaque textes côte à côt et le mettre au milieu de ma page. ici pas de problème.

Par contre j'aimerai les séparer car elles sont trop côlé entre elle pour qu'il y est un espace et là j'y arrive pas.

Voici une maquette d'exemple: http://hpics.li/2ac69ba

Et voici mon code:

<div class="services">
    <div class="service2">
		<div class="webdesignimage fade-in ">
			<img src="images/webdesign2.png">
		</div>
		<div class="webdesigntexte fade-in">
			<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                      quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                       consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>

	<div class="service3">
		<div class="frontimage fade-in ">
			<img src="images/front2.png">
		</div>	

	    <div class="fronttexte fade-in">
		 <p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                  cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          </p>
	    </div>
	</div>

	<div class="service4ref">

		<div class="referencementimage fade-in ">
			<img src="images/referencement2.png">
		</div>
	 	<div class="referencementtexte fade-in">	
		<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>		


<div class="services">
    <div class="service2">
		<div class="wordpress fade-in ">
			<img src="images/wordpress2.png">
		</div>
		<div class="webdesigntexte fade-in">
			<p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>


	<div class="service3">
		<div class="divi fade-in ">
			<img src="images/divi2.png">
		</div>	

	    <div class="fronttexte fade-in">
		 	<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                          tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                          proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        	</p>
	    </div>
	</div>

	<div class="service4">

		<div class="ecommerce fade-in ">
			<img src="images/ecommerce2.png">
		</div>
	 	<div class="referencementtexte fade-in">	
		<p>ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                  consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                  proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>

</div>



<div class="services">
    <div class="service2">
		<div class="responsive fade-in ">
			<img src="images/responsive2.png">
		</div>
		<div class="webdesigntexte fade-in">
			<p> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                         tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                         quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                         cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                         proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</div>
	</div>
</div>





.services{
margin-top: 10%;
text-align: center
}

.services p{
line-height: 18px;
font-family: 'Roboto', sans-serif; 
text-align: justify;
font-size: 14px;
}


.fronttexte p{;
display: block;
}


.webdesigntexte p{
display: block;
}

.referencementtexte p{
display: block
}


.service2{
display: inline-block; 

}

.service3{
display: inline-block; 
position: relative;
top: 18px;
}

.service4{
display: inline-block; 
}

.service4ref{
 display: inline-block;
 position: relative;
 bottom: 13px;  
}

Modifié par mvc (30 Aug 2017 - 16:18)
Pour rajouter de l'espace, il faut ajouter du margin (en haut, en bas, à droite et à gauche) aux éléments concernés.
Modifié par allan00958 (30 Aug 2017 - 16:21)
Sujet clos
Aller à