为什么我的 justify-content 在我的 Modal 页面中不起作用

问题描述

我正在自学一些 Web 编码，并且是自学的，所以请耐心等待。我正在尝试设置我的 CSS Modal 页面，以便图像和文本均匀分布。我希望图像垂直居中，并且 para 标签直接从图像顶部的位置开始。当我删除大量文本时（当我第一次开始输入只有几个词的段落时，比方说），图像和文本都被均匀地间隔开。现在我添加了更多文本， justify-content 属性似乎被忽略了，我不确定问题是什么。

HTML

<div ID= "modalPage1" class = "modalFish">

        <div ID = "modalContent1" class = "modalFishContent">
        <div><img ID= "modalimg" class= "modalFishImg" src="Images/Fish School.jpg"></div>
        <div><p ID = "modalTxt">The inspiration behind this piece was Fall foliage. Deep red being one of my favorite colors for the fall,I decided to use this as the background. Being that it's a dark color,it's easy to layer on different 
            colors that will coordinate well,while adding a pop to it. </p>

            <p ID = "modalTxt">Around this time I had been making a few more "simpler" and "cute" pieces,so I wanted to being myself back
                to making something a little bit more abstract. Although semi simple in design,from afar,the origami pieces 
                appear a bit obscure,almost reminicent of a pile of leaves. Looking closely,we can see that the origami is 
                in fact fish swimming in all different driections.
            </p>
            </div>
        </div>
    </div>

CSS

#modalPage1{
        
        height: 100%;
        width: 100%;
        position:absolute;
        top: 0;
        background-color: rgba(255,128,213,0.5);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #modalPage1 > #modalContent1{
        background-color: white;
        height:100%;
        width: 75%;
       display:flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-evenly;
       
       
   }
   div > #modalTxt{
       width: 75%;
    
   }

   div > #modalimg{
    width: 353px;
    height: 447px;
    
   }

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）