I want to make photo near my text putted in square, how can center it?-CodePudding

I want to make the part of my site centered,there is one img and text putted in square,but also it should be responsive, here is my css and html codes:

#part1{
    padding-bottom:100px;
    margin:auto;
    overflow:hidden;
    width:80%;
}

#part1 h1{
    text-align:center;
    font-size:250%;
    padding-top:35px;
}

#part1 p{
    text-align:center;
    font-size:110%;
    padding:30px;
    background-color:#F0F8FF;
    margin-top:60px;
    width: 40%;
    height: 60%;
    float:left;
}

#part2 h1{
    text-align:center;
    font-size:250%;
}

and html:

     <section id="part1">
         <div >
             <h1>About</h1>
             <div >
                 <p>Accommodation in comfortable guest houses made of river stone on the shore of the lake, the possibility of constant communication with animals,</br> horseback riding through endless meadows, the possibility of developing a life, ecological food from the products of one’s own farm and unity with the spirit of the village, this is agro-tourism in Zagatala.</br> Those who wish can walk to domestic cows, cook cottage cheese, mow hay and much more.</br>
Eco-farm "Lake of Hope" is, first of all, an ecologically clean, healthy and congenial holiday, which highly appreciates the level of noise and bustle of the general population.</p>
                 <img id="about-image" src="images/about.jpg" width="570" height="450" />
             </div>
         </div>
     </section>

CodePudding user response：

I believe the site you've posted uses css flexbox to deal with responsive design and div allignment. You can learn about this here

.about-center {
  display: grid;
  /* 50% 50% */
  grid-template-columns: 1fr 1fr;
  /* centering */
  place-items: center;
  /* 1gap between items */
  gap: 1rem;
  /* padding */
  padding: 0.5rem;
  /* for debugging purposes, delete this */
  border: 1px solid red;
}


/* responsive image */

.about-center img {
  width: 100%;
  height: 100%;
  /* make image not stretch */
  object-fit: cover;
}

<body>
  <section id="part1">
    <div >

      <div >
        <!-- 1 -->
        <div>
          <h1>About</h1>
          <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est eaque aspernatur soluta non, pariatur adipisci labore? Voluptatibus quis repellat placeat ex debitis. Quia, perspiciatis commodi tempora odio saepe praesentium beatae!</p>
        </div>

        <!-- 2 -->
        <img id="about-image" src="https://picsum.photos/500" />
      </div>

    </div>
  </section>
</body>