• 1397/12/07

وسط قرار دادن یک المنت :

عرض سلام و وقت بخیر

مهندس من در کد زیر میخوام ک عکس رو وسطBox قرار بدم به طوری که با تغییر عرض browser باز هم در وسط box قرار بگیره.

html:


    <div class="facilities">
      <h2 class="firstHead">Consectetur adipisicing elit</h2>
      <p class="firstP">Lorem ipsum dolor sit amet, delectus consequatur, similique quia!</p>
      <div class="boxes">
        <div class="subBox">
          <img src="Images/4.png" >
          <h3>Lorem ipsum dolor</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim quam consectetur quibusdam magni minus aut modi aliquid.</p>
        </div>
        <div class="subBox">
            <img src="Images/3.png" >
            <h3>Consectetur adipisicing</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ullam consequatur repellat debitis maxime.</p>
        </div>
        <div class="subBox">
            <img src="Images/4.png" >
            <h3>Adipisicing elit totam</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque eaque eveniet, nesciunt molestias. Ipsam, voluptate vero.</p>
        </div>
      </div>
    </div>
   



css:

.facilities{
  background-color: #F5F5F5;
  border-bottom: 1px solid #dcdcdc;
}
h2.firstHead{
  font-size: 45px;
  color: #474747;
  text-align: center;
  padding-top: 90px;
  
}
p.firstP{
  text-align: center;
  margin: 15px 0 40px 0;
  color: #858688;
  font-size: 22px;
}
.boxes{
  margin: 25px ;
  padding-bottom: 80px;
  height: 450px;
}
.subBox{
  border: 1px solid #e3e3e3;
  border-radius: 5px;
  width: 29%;
  float: left;
  height: 380px;
  background-color: white;
  margin:2%;
}
.subBox img{
  margin-top: 40px;
  margin-left: 27%;
  max-width:120px ;

}
.subBox h3{
  width: 77%;
  font-size: 19px;
  color:#85858f;
  text-align: center;
  margin: 10px auto;
  line-height: 28px;
}
.subBox p{
  width: 77%;
  font-size: 15px;
  color:#444444;
  text-align: center;
  line-height: 25px;
}

برای img  از margin: 0 auto  استفاده کردم ولی یاز هم وسط نمیاد.

باتشکر

  • 1397/12/07
  • ساعت 15:56

سلام به کلاس boxes 

text-align : center  

بدین درست میشه


  • 1397/12/07
  • ساعت 16:08

ممنون
 
اگه من درست متوجه شده باشم برای وسط قرار گرفتن img باید text align : center رو به parent اون داد؟

چون من این صفت رو به خود img میدادم ولی تغییر نمیکرد.

 


  • 1397/12/07
  • ساعت 16:17

در بعضی از مواقع بله

 

چون ما با این کار بهش میگیم هر المانی که داخل اون باکس هست باید وسط باشه


logo-enamadlogo-samandehi