[Résolu] Un alignement de texte sur vidéo

Bonjour et merci d'avoir lu,

Cela fait presque 2semaines que je n'arrive pas à trouver de solution.

J'ai voulu mettre plusieurs text et image par dessus une vidéo sans pour autant que la video soit un background car c'est une div et non la pages entière. ( Car en dessous, je mettrai d'autre div pour des text et autres).

J'ai réussi après un long moment de recherche à mettre mes "sous div" les unes en dessous des autres car c'est ce que je voulais, mais il y a un problème.

Je crois que le code comprends que c'est tout l'intégralité qui doit être comme ça alors que je voulais seulement les blocs.

Car dans ces sous div, j'ai du contenu dedans et d'ont des text qui ne veulent pas ce mettre en horizontal par défaut.

Il faut savoir que je n'ai pas pu mettre mes div en text-align et tout les autres code "align". J'ai pu simplement mettre "display: flex".

Du coup mon problème, c'est que je ne sais absolument pas comment faire pour que mes textes reviennent horizontal :'(

J'ai fais exprès de mettre une couleur grise à mon background pour vous montrer la taille de mes div.


Merci d'avance ^^

Pour le HTML:

<div class="video_back">
        <video class="video" autoplay loop muted >
            <source src="img_video/video2.mp4" type="video/mp4" />
        </video>


        <div class="text_video">


            <div class="un">
                <img class="un_gauche" src="img_video/gauche.png" /><p class="un_text">Bienvenue dans ce premier site</p><img class="un_droite" src="img_video/droite.png" />
            </div>
            <div class="deux">
                <h2>MYALU</h2>
            </div>
            <div class="trois">
                <img src="img_video/play.png" /> <p class="text_trois">Regarder la Video</p>
            </div>

            <div class="quatre">

                <div class="quatre_video">
                    <p >DERNIERE VIDEO DE LA SEMAINE</p>
                </div>
                
                
                <div class="quatre_chaine">
                    <p >CHAINE YT</p>
                </div>
                
            </div>
            
        </div>

    </div>

Pour le CSS:

.video_back {
    position: relative;
    width: 50px;
    padding-bottom: 60px;
}


    .video_back .video {
        
 
    }


    .video_back .text_video {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        color:greenyellow;
        margin-bottom: 70px;
        )
    }


        .video_back .text_video .un {
            display: flex;
            padding-left: 650px;
        }

            .video_back .text_video .un .un_gauche {
    
            }


            .video_back .text_video .un .un_droite {
            }

            .video_back .text_video .un .un_text {
            }


        .video_back .text_video .deux {
            display: flex;
            padding-left: 860px;
        }


        .video_back .text_video .trois {
            display: flex;
            padding-left: 750px;
            margin-top:10px;
            
        }

            .video_back .text_video .trois .text_trois {
                margin-top: 10px;
                text-align: left;
                width: 500px;
                margin: 20px auto;
                padding: 50px;
                border-width: 10px;
                background-color: #8C8B98;
            }


        .video_back .text_video .quatre {
            display: flex;
            padding-left: 800px;
            
        }

            .video_back .text_video .quatre .quatre_video {
                margin-right: 10px;
                
                width: 400px;
                
            }


            .video_back .text_video .quatre .quatre_chaine {
                
                width: 400px;
                
            }

seeyun a écrit :
J'ai trouvé après presque 3semaines ! mdr ^^

J'ai tout simplement surprimer "position:absolute" dans ".video_back .text_video"
et j'ai mis :
.video_back .text_video .un .un_text {
vertical-align:bottom;
padding-top: 60px;
}

Je ne ferme pas le sujet pour le moment,
comme ça s'il y a des personnes comme moi qui on eu du mal peuvent venir regarder

Même si tu clotures le sujet, tout le monde pourra voir ta réponse. Clôturer le sujet signifie juste que tu n'as plus besoins d'aide