Question

我在对齐文本时遇到困难，我希望div左侧的文本和右侧的图像也从顶部居中对齐。我尝试过justify-content和text-align，但是它们没有给出我需要的结果，我也在使用CSS网格。

这是有问题的代码

/*this is just the css grid stuff*/
.contain{
  display: grid;
  grid-template-columns:  repeat(9, minmax(120px, 1fr)) ;
  text-align: center;
  justify-content: center;
  grid-template-rows:  minmax(50px , auto);
  grid-template-areas: 

  "s content2 content2 content2  content2 content2 content2 content2 empty2";
}

/* Here is the code */
.contentc{
    background-color: white;
    border-radius: 20px;
    padding: 40px;
    width: 100%;
    grid-area: content2;
}

.text3{
  margin:auto;
    color: black;
}

.para3{
     color: black;
    margin: auto;
}

<div class="contain">
  <div class= "contentc">
     <img class="img-3" src="Use Any Image" >
     <h2 class="text3">Twitter Clone </h2>
     <p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione itaque cupiditate porro ipsam quod, fugit reprehenderit autem architecto aliquam harum.</p>
  </div>
</div>

Answer 1

我鼓励您学习弹性盒，它使网格过时。

这是适合您的工作代码。这在我的机器上效果很好。

别忘了您也可以嵌套flexbox，这就是我如何完成此工作的方式。

<!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
        <style>
            .contentc {
                display: flex;
                flex-direction: row-reverse;
                justify-content: center;
                align-content: center;
            }

            #text {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-content: center;
            }

        </style>
    </head>
    <body>
        <div class="contain">
            <div class="contentc">
                <img class="img-3" src="http://interactive.nydailynews.com/2016/05/simpsons-quiz/img/simp1.jpg" >
                <div id="text">
                    <h2 class="text3">Twitter Clone </h2>
                    <p class="para3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ratione itaque cupiditate porro ipsam quod, fugit reprehenderit autem architecto aliquam harum.</p>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 2

对不起，如果我的回答没有帮助，但我希望它能在某种程度上解决问题。

我建议您尝试让CSS更简单，就好像您只需要将文本和图像放置在特定位置，那么这段代码可能就在您的胡同中：

.para3 {display:inline; text-align: top}
.img-3 {float: right}

希望它可以帮助您解决此问题。

如何在div /容器中居中放置文本和图像

2 个答案: