如何在 div/容器中居中文本和图像答案

【问题标题】：How to center text & image in a div/container如何在 div/容器中居中文本和图像
【发布时间】：2020-02-11 23:23:14
【问题描述】：

我很难对齐文本，我希望 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>

【问题讨论】：

你的意思是这样的？ jsfiddle.net/rb8skjep/2
是的，你非常接近，唯一的事情是我希望文本中途/降低到图像的一半。我可以使用 margin-top: 50% 但我想要一种响应方式。
在两者上都使用 position:absolute 样式，而不是使用 left:0 作为文本，使用 right:0 作为 img
wow prottay thx man 这正是我正在寻找的东西，不敢相信它这么容易

标签： html css

【解决方案1】：

我会鼓励你学习 flex-box，它会让网格过时。

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

别忘了你也可以嵌套 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>

【讨论】：

哇，非常感谢你，这正是我想要的，我认为 css 网格很棒，我想我得开始学习 flexbox 了 :)
哈哈，我知道，因为我也遇到过同样的情况。没问题的人。我有一个很好的备忘单，但我似乎找不到它，只需在谷歌搜索“flexbox 备忘单”这是一个sketchingwithcss.com/samplechapter/cheatsheet.html 视觉效果让您了解命令的作用。这几乎适用于你需要用 CSS 做的所有事情

【解决方案2】：

对不起，如果我的回答没有那么有用，但我希望它可以在某种程度上。

我的建议是你试着把 CSS 想得更简单，就好像你想要的只是让文本和图像位于某些位置，那么这段代码可能就在你的小巷里：

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

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

【讨论】：

感谢您的帮助，尽管这不是我想要的，但我仍然感谢您的帮助:)