How to center these elements

Question

How to center these elements

Navigation

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

0

Good, I am trying to center the titles "My skills" , "That we can encompass" and also the set of images below .

The problem is that if I put a text-align:center to your container, the paragraph also focuses on me and that does not interest me.

How is this solved? As a center, only those 3 elements?

.General-Destrezas {
  background-color: #FFF;
}

.Destrezas {
  width: 75%;
  text-align: justify;
  margin: auto;
}

.Texto-Destrezas {
  text-indent: 20px;
  margin-bottom: 20px;
}

.Resaltar-Destreza {
  font-weight: bold;
}

.Listado-Destrezas {
  list-style: none;
  text-indent: 20px;
  margin-bottom: 20px;
}

.Tecnologias-Destrezas {
  list-style: none;
  /* Lista horizontal */
  display: flex;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.Tecnologias-Destrezas img {
  height: 90px;
}

<div class="General General-Destrezas">

  <a name="Conoceme"></a>

  <div class="Destrezas">
    <h2>Mis destrezas</h2>

    <p class="Texto-Destrezas">
      Tengo la titulación de <span class="Resaltar-Destreza">Técnico Superior en Regulación y Control de Sistemas Automáticos</span> y actualmente estoy cursando el <span class="Resaltar-Destreza">Grado de Ingeniería Electrónica Industrial y Automática</span>.
    </p>

    <h3>¿Que podemos abarcar? </h3>

    <ul class="Listado-Destrezas">
      <li> Podemos desarrollar proyectos web desde sus inicios, planteando una idea, desarrollando su código y diseñando un aspecto acorde a sus necesidades.</li>
      <br>
      <li> Desarrollo de software para cualquier funcionalidad deseada, en todas sus etapas del proceso. </li>
      <br>
      <li> ¿Te atreves a robotizar tu casa? Desarrollo de placas de arduino, PLCs, para tener los mayores avances y comodidades en tu hogar, oficina o negocio. </li>
    </ul>

    <ul class="Tecnologias-Destrezas">
      <li><img src="Img/Icono-HTML.png" alt="HTML"></li>
      <li><img src="Img/Icono-CSS.png" alt="CSS"></li>
      <li><img src="Img/Icono-JS.png" alt="JS"></li>
      <li><img src="Img/Icono-SQL.png" alt="SQL"></li>
      <li><img src="Img/Icono-PHP.png" alt="PHP"></li>
      <li><img src="Img/Icono-C.png" alt="C"></li>
      <li><img src="Img/Icono-PSD.png" alt="PSD"></li>
    </ul>
  </div>
</div>

Thank you!

css3 css

asked by NEA 09.09.2017 в 21:59

source

2 answers

0

The elements h1, h2, h3, h4 and h5 are block elements, which means that they occupy the entire width of the line. If you specify text-align: center only them, they will be aligned in the center. I will add a class called t-center to the titles that center them both.

And as soon as the images are difficult because you did not publish even one to know the dimensions of them and center them perfectly.

.General-Destrezas {
  background-color: #FFF;
}

.Destrezas {
  width: 75%;
  text-align: justify;
  margin: auto;
}

.Texto-Destrezas {
  text-indent: 20px;
  margin-bottom: 20px;
}

.Resaltar-Destreza {
  font-weight: bold;
}

.Listado-Destrezas {
  list-style: none;
  text-indent: 20px;
  margin-bottom: 20px;
}

.Tecnologias-Destrezas {
  list-style: none;
  /* Lista horizontal */
  display: flex;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.Tecnologias-Destrezas img {
  height: 90px;
}

.t-center{
text-align:center;
}

<div class="General General-Destrezas">

  <a name="Conoceme"></a>

  <div class="Destrezas">
    <h2 class="t-center">Mis destrezas</h2>

    <p class="Texto-Destrezas">
      Tengo la titulación de <span class="Resaltar-Destreza">Técnico Superior en Regulación y Control de Sistemas Automáticos</span> y actualmente estoy cursando el <span class="Resaltar-Destreza">Grado de Ingeniería Electrónica Industrial y Automática</span>.
    </p>

    <h3 class="t-center">¿Que podemos abarcar? </h3>

    <ul class="Listado-Destrezas">
      <li> Podemos desarrollar proyectos web desde sus inicios, planteando una idea, desarrollando su código y diseñando un aspecto acorde a sus necesidades.</li>
      <br>
      <li> Desarrollo de software para cualquier funcionalidad deseada, en todas sus etapas del proceso. </li>
      <br>
      <li> ¿Te atreves a robotizar tu casa? Desarrollo de placas de arduino, PLCs, para tener los mayores avances y comodidades en tu hogar, oficina o negocio. </li>
    </ul>

    <ul class="Tecnologias-Destrezas">
      <li><img src="Img/Icono-HTML.png" alt="HTML"></li>
      <li><img src="Img/Icono-CSS.png" alt="CSS"></li>
      <li><img src="Img/Icono-JS.png" alt="JS"></li>
      <li><img src="Img/Icono-SQL.png" alt="SQL"></li>
      <li><img src="Img/Icono-PHP.png" alt="PHP"></li>
      <li><img src="Img/Icono-C.png" alt="C"></li>
      <li><img src="Img/Icono-PSD.png" alt="PSD"></li>
    </ul>
  </div>
</div>

answered by 09.09.2017 в 22:48

How to go back once to a fragment? Label Select changed its style when it is MacBook

score 1 · Accepted Answer

.General-Destrezas {
  background-color: #FFF;
}

.Destrezas {
  width: 75%;
  text-align: justify;
  margin: auto;
}

.Texto-Destrezas {
  text-indent: 20px;
  margin-bottom: 20px;
}

.Resaltar-Destreza {
  font-weight: bold;
}

.Listado-Destrezas {
  list-style: none;
  text-indent: 20px;
  margin-bottom: 20px;
}

.Tecnologias-Destrezas {
  list-style: none;
  /* Lista horizontal */
  display: flex;
  padding-bottom: 40px;
  box-sizing: border-box;
}

.Tecnologias-Destrezas img {
  height: 90px;
}

<div class="General General-Destrezas">

  <a name="Conoceme"></a>

  <div class="Destrezas">
    <h2 style="text-align:center">Mis destrezas</h2>

    <p class="Texto-Destrezas">
      Tengo la titulación de <span class="Resaltar-Destreza">Técnico Superior en Regulación y Control de Sistemas Automáticos</span> y actualmente estoy cursando el <span class="Resaltar-Destreza">Grado de Ingeniería Electrónica Industrial y Automática</span>.
    </p>

    <h3>¿Que podemos abarcar? </h3>

    <ul class="Listado-Destrezas">
      <li> Podemos desarrollar proyectos web desde sus inicios, planteando una idea, desarrollando su código y diseñando un aspecto acorde a sus necesidades.</li>
      <br>
      <li> Desarrollo de software para cualquier funcionalidad deseada, en todas sus etapas del proceso. </li>
      <br>
      <li> ¿Te atreves a robotizar tu casa? Desarrollo de placas de arduino, PLCs, para tener los mayores avances y comodidades en tu hogar, oficina o negocio. </li>
    </ul>

    <ul class="Tecnologias-Destrezas">
      <li><img src="Img/Icono-HTML.png" alt="HTML"></li>
      <li><img src="Img/Icono-CSS.png" alt="CSS"></li>
      <li><img src="Img/Icono-JS.png" alt="JS"></li>
      <li><img src="Img/Icono-SQL.png" alt="SQL"></li>
      <li><img src="Img/Icono-PHP.png" alt="PHP"></li>
      <li><img src="Img/Icono-C.png" alt="C"></li>
      <li><img src="Img/Icono-PSD.png" alt="PSD"></li>
    </ul>
  </div>
</div>