Как центрировать текст и изображение в div / контейнере - PullRequest
Новая
       0

Как центрировать текст и изображение в div / контейнере

1 голос
/ 11 февраля 2020

У меня проблемы с выравниванием текстов, я хочу, чтобы тексты с левой стороны от 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>

Ответы [ 2 ]

2 голосов
/ 11 февраля 2020

Я бы посоветовал вам изучить flex-box, он делает сетку устаревшей.

вот рабочий код для вас. это прекрасно работает на моей машине.

Не забывайте, что вы можете вкладывать и флексбоксы, вот как я сделал эту работу. 

<!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>
0 голосов
/ 11 февраля 2020

извините, если мой ответ не так уж полезен, но я надеюсь, что это может каким-то образом.

То, что я предлагаю, вы пытаетесь думать более просто для CSS, как будто все, что вы хотите, это для текста и изображения должны быть в определенных позициях, тогда этот код может оказаться на вашей аллее: 

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

Надеюсь, что это может помочь вам решить эту проблему.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...