28172 sujets

CSS et mise en forme, CSS3

[Résolu] Alignement de mon image et de mon texte

upload/1549983784-74431-maquette210.png Bonjour , j'ai un petit soucis sur CSS
Je souhaiterai aligner mon image avec mes <h2> ( image à gauche et <h2 à droite). Or mes <h2>se mettent en ligne et non en colonne comme je le souhaiterais et je n'arrive absolument pas à les aligner..
Quelqu'un a une solution ? je lui en serai très reconnaissante ... Voici mon code 

<body>

<section>
	<article>
		<h1 class="titre_services"> Nos services </h1>
			<p class="services">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed molestie</br> purus, nec bibendum turpis. Duis nec orci ligula. Vivamus.</p>
				<h2>UX Design 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p> 
				<h2>UI Design</h2> 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
				<h2>SEO</h2> 
					<p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>

			<p class="pc"> <img src="images/pic_pc.png" alt="photo de pc" /> <p>
				
	</article>



 .titre_services 
{
	text-align: center;
	font-family:'robotoblack';
	font-size: 40px;
	margin-top: 5px;
	color:#282828;
}

.services
{
	text-align: center;
}

.pc 
{
	padding-left: 60px;
	margin-top: 50px;

}


Et voici la maquette de ce que j'aimerai comme rendu
Modifié par Tinkerbell06 (12 Feb 2019 - 16:03)
Hello,

Attention ta première balise <h2> n'est pas fermée après "UX Design", c'est sûrement ça qui te cause un problème Smiley cligne
@Tinkerbell06 Oh okay j'avais pas compris ce que tu voulais faire pardon.
En fait tu veux que ton contenu soit sous forme de 2 colonnes si je comprends mieux.
Pour ça du coup il existe une multitude de technique mais pour répondre à ton problème je peux te proposer du display flex:

HTML

<section>
    <article>
        <div class="article">
            <div class="article__column center">
                <img src="images/pic_pc.png" class="pc" alt="photo de pc" />
            </div>
            <div class="article__column">
                <h1 class="titre_services"> Nos services </h1>
                <p class="services">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed molestie</br> purus, nec bibendum turpis. Duis nec orci ligula. Vivamus.</p>
                <h2>UX Design</h2>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                <h2>UI Design</h2>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
                <h2>SEO</h2>
                <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
            </div>
        </div>
    </article>
</section>


CSS


.titre_services {
    text-align: center;
    font-family:'robotoblack';
    font-size: 40px;
    margin-top: 5px;
    color:#282828;
}

.services {
    text-align: center;
}

.pc {
    padding-left: 60px;
    margin-top: 50px;
}

.article {
    display: flex;
    width: 100vw;
}

.article__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 50%;
}

.center {
    text-align: center;
    align-items: center;
}


Essaye et reviens nous donner les résultats par rapport à ce que tu voulais Smiley cligne
Sujet clos
Aller à