as center a div within section, margin auto does not work for me

Question

as center a div within section, margin auto does not work for me

Navigation

#1 by (0 votes)
#2 by (0 votes)

-1

I'm doing a site but the div container I put margin auto and it does not work

.servicios{
  background: #fff;
  height: 750px;
  clear: both;
width: 100%;
float: left;
margin: auto;

}
.title-service{
  font-size: 70px;
  text-align: center;
  font-weight: bolder;
  clear: both;
  color: #bdc3c7;
  padding-top:50px;
  margin: auto;
}
.servicios hr{
height: 10px;
background: #E9CA1E;
border: none;
width: 100px;
margin: auto;
margin-bottom: 20px;
}
.contenido-serv{
  width: 100%;
  margin:0 auto;
  float: left;
}
.aut-ind{
  background: #ecf0f1;
  width:300px;
  float: left;
  position: relative;
  margin:0 auto;
}
.importacion-ind{
  background: #ecf0f1;
  width:300px;
  float: left;
  position: relative;
  margin:0 auto;
}
.asesoramiento{
  background: #ecf0f1;
  width:300px;
  float: left;
  position: relative;
  margin:0 auto;
}

<section class="servicios">
     <p class="title-service">SERVICIOS</p>
     <hr class="linea-servicio">
     <div class="contenido-serv">
  <div class="aut-ind">
    <article class="">
    <img src="industria.jpg" alt="" height=250px width="300px"  >
    <p class="titulos">AUTOMATIZACION INDUSTRIAL</p>
       <p>Lorem ipsum dolor sit amet, consectetuer
          <br>adipiscing elit.Aenean commodo ligula eget
          <br>dolor. Aenean massa. Cum sociis natoque
          <br>penatibus et magnis dis parturient montes,
          <br>nascetur ridiculus mus. Donec quam felis,
       </p>
       </article>
  </div>
  <div class="importacion-ind">
      <img src="container.jpg" alt=""  height="250px" width="300px">
      <p class="titulos">IMPORTACION</p>
       <p>Lorem ipsum dolor sit amet, consectetuer
       <br>adipiscing elit.Aenean commodo ligula eget
       <br>dolor. Aenean massa. Cum sociis natoque
       <br>penatibus et magnis dis parturient montes,
       <br>nascetur ridiculus mus. Donec quam felis,
     </p>
  </div>
      <div class="asesoramiento">
         <img src="asesoramiento.jpg" alt="" height="250px" width="300px">
         <p class="titulos">ASESORAMIENTO TECNICO</p>
         <p>Lorem ipsum dolor sit amet, consectetuer
         <br>adipiscing elit.Aenean commodo ligula eget
         <br>dolor. Aenean massa. Cum sociis natoque
         <br>penatibus et magnis dis parturient montes,
        <br>nascetur ridiculus mus. Donec quam felis,
        </p>
      </div>
  </div>
</section>

html5 html css3 css

asked by Paul Cezzane 28.08.2017 в 01:27

source

2 answers

0

I hope I can help, but I would recommend you to name your classes better in your html, so that you avoid repeating unnecessary code, luck with your project, any doubt do not hesitate to contact me.

.servicios {
  background: #fff;
  height: 750px;
  width: 100%;
}

.title-service {
  font-size: 70px;
  text-align: center;
  font-weight: bolder;
  color: #bdc3c7;
  padding-top: 50px;
}

.servicios hr {
  height: 10px;
  background: #E9CA1E;
  border: none;
  width: 100px;
  margin: auto;
  margin-bottom: 20px;
}

.contenido-serv {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.box{
  width: 300px;
  background: #ecf0f1;
  padding: 15px;
}

<section class="servicios">
  <p class="title-service">SERVICIOS</p>
  <hr class="linea-servicio">
  <div class="contenido-serv">
    <div class="box aut-ind">
      <article class="">
        <img src="industria.jpg" >
        <p class="titulos">AUTOMATIZACION INDUSTRIAL</p>
        <p>Lorem ipsum dolor sit amet, consectetuer
          <br>adipiscing elit.Aenean commodo ligula eget
          <br>dolor. Aenean massa. Cum sociis natoque
          <br>penatibus et magnis dis parturient montes,
          <br>nascetur ridiculus mus. Donec quam felis,
        </p>
      </article>
    </div>
    <div class="box importacion-ind">
      <img src="container.jpg">
      <p class="titulos">IMPORTACION</p>
      <p>Lorem ipsum dolor sit amet, consectetuer
        <br>adipiscing elit.Aenean commodo ligula eget
        <br>dolor. Aenean massa. Cum sociis natoque
        <br>penatibus et magnis dis parturient montes,
        <br>nascetur ridiculus mus. Donec quam felis,
      </p>
    </div>
    <div class="box asesoramiento">
      <img src="asesoramiento.jpg">
      <p class="titulos">ASESORAMIENTO TECNICO</p>
      <p>Lorem ipsum dolor sit amet, consectetuer
        <br>adipiscing elit.Aenean commodo ligula eget
        <br>dolor. Aenean massa. Cum sociis natoque
        <br>penatibus et magnis dis parturient montes,
        <br>nascetur ridiculus mus. Donec quam felis,
      </p>
    </div>
  </div>
</section>

answered by 28.08.2017 в 09:40

java.lang.String to type developerjr.evertmoreno.ime.Friends Enable report of errors of any kind - PHP

score 0 · Accepted Answer

If I understand what you intend to do, you can group the styles of the three elements into one common class (I used sub-section ), since none of them has anything in particular.

As for centering said "div", if you remove the line float: left , it works as you want it.

.servicios{
  background: #fff;
  height: 750px;
  clear: both;
width: 100%;
float: left;
margin: auto;

}
.title-service{
  font-size: 70px;
  text-align: center;
  font-weight: bolder;
  clear: both;
  color: #bdc3c7;
  padding-top:50px;
  margin: auto;
}
.servicios hr{
height: 10px;
background: #E9CA1E;
border: none;
width: 100px;
margin: auto;
margin-bottom: 20px;
}
.contenido-serv{
  width: 100%;
  margin:0 auto;
  float: left;
}
.servicios .sub-section {
  background: #ecf0f1;
  width:300px;
  position: relative;
  margin:0 auto;
}

<section class="servicios">
     <p class="title-service">SERVICIOS</p>
     <hr class="linea-servicio">
     <div class="contenido-serv">
  <div class="aut-ind sub-section">
    <article class="">
    <img src="industria.jpg" alt="" height=250px width="300px"  >
    <p class="titulos">AUTOMATIZACION INDUSTRIAL</p>
       <p>Lorem ipsum dolor sit amet, consectetuer
          <br>adipiscing elit.Aenean commodo ligula eget
          <br>dolor. Aenean massa. Cum sociis natoque
          <br>penatibus et magnis dis parturient montes,
          <br>nascetur ridiculus mus. Donec quam felis,
       </p>
       </article>
  </div>
  <div class="importacion-ind sub-section">
      <img src="container.jpg" alt=""  height="250px" width="300px">
      <p class="titulos">IMPORTACION</p>
       <p>Lorem ipsum dolor sit amet, consectetuer
       <br>adipiscing elit.Aenean commodo ligula eget
       <br>dolor. Aenean massa. Cum sociis natoque
       <br>penatibus et magnis dis parturient montes,
       <br>nascetur ridiculus mus. Donec quam felis,
     </p>
  </div>
      <div class="asesoramiento sub-section">
         <img src="asesoramiento.jpg" alt="" height="250px" width="300px">
         <p class="titulos">ASESORAMIENTO TECNICO</p>
         <p>Lorem ipsum dolor sit amet, consectetuer
         <br>adipiscing elit.Aenean commodo ligula eget
         <br>dolor. Aenean massa. Cum sociis natoque
         <br>penatibus et magnis dis parturient montes,
        <br>nascetur ridiculus mus. Donec quam felis,
        </p>
      </div>
  </div>
</section>

EDITION:

Taking into account that the OP had explained the problem wrong, I modified the solution and I use Flexbox to "center" the three div horizontally:

.servicios{
  background: #fff;
  height: 750px;
  clear: both;
width: 100%;
float: left;
margin: auto;

}
.title-service{
  font-size: 70px;
  text-align: center;
  font-weight: bolder;
  clear: both;
  color: #bdc3c7;
  padding-top:50px;
  margin: auto;
}
.servicios hr{
height: 10px;
background: #E9CA1E;
border: none;
width: 100px;
margin: auto;
margin-bottom: 20px;
}
.contenido-serv {
  display: flex;
  justify-content: space-around;
}
.servicios .sub-section {
  background: #ecf0f1;
  width:300px;
}

<section class="servicios">
     <p class="title-service">SERVICIOS</p>
     <hr class="linea-servicio">
     <div class="contenido-serv">
  <div class="aut-ind sub-section">
    <article class="">
    <img src="industria.jpg" alt="" height=250px width="300px"  >
    <p class="titulos">AUTOMATIZACION INDUSTRIAL</p>
       <p>Lorem ipsum dolor sit amet, consectetuer
          <br>adipiscing elit.Aenean commodo ligula eget
          <br>dolor. Aenean massa. Cum sociis natoque
          <br>penatibus et magnis dis parturient montes,
          <br>nascetur ridiculus mus. Donec quam felis,
       </p>
       </article>
  </div>
  <div class="importacion-ind sub-section">
      <img src="container.jpg" alt=""  height="250px" width="300px">
      <p class="titulos">IMPORTACION</p>
       <p>Lorem ipsum dolor sit amet, consectetuer
       <br>adipiscing elit.Aenean commodo ligula eget
       <br>dolor. Aenean massa. Cum sociis natoque
       <br>penatibus et magnis dis parturient montes,
       <br>nascetur ridiculus mus. Donec quam felis,
     </p>
  </div>
      <div class="asesoramiento sub-section">
         <img src="asesoramiento.jpg" alt="" height="250px" width="300px">
         <p class="titulos">ASESORAMIENTO TECNICO</p>
         <p>Lorem ipsum dolor sit amet, consectetuer
         <br>adipiscing elit.Aenean commodo ligula eget
         <br>dolor. Aenean massa. Cum sociis natoque
         <br>penatibus et magnis dis parturient montes,
        <br>nascetur ridiculus mus. Donec quam felis,
        </p>
      </div>
  </div>
</section>