He creado la siguiente lista dentro de un div que está centrado por flex.
Como puede ver en el fragmento, la lista no está centrada (como esperaría con el uso de flex en la regla list-div2 y translate en los padres middle-text div.
¿Alguien me puede ayudar? ¿Por qué no se centra correctamente?

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}
<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>
0
ItFreak 15 sep. 2018 a las 15:49

3 respuestas

La mejor respuesta

Debe dar padding: 0; a su ul

ul.items-list2 {
  padding: 0;
}

La especificación W3C dice que ul tiene un margen predeterminado de 40px, pero diferentes navegadores sobre esto. Por lo tanto, siempre es bueno normalizar márgenes y rellenos.

UL padding

body {
  margin: 0;
}
ul.items-list2 {
  padding: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}
<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>
1
kiranvj 15 sep. 2018 a las 13:05

Esto se debe al relleno / margen que los navegadores agregan a la etiqueta ul de forma predeterminada.

Ejemplo:

body {
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: 100vh;
  background-color: white;
}

.container>div {
  min-height: 100vh;
  border: 1px solid black;
  box-sizing: border-box;
  background-color: inherit;
}

.container>div .content {
  height: 100vh;
  width: 100vw;
  background-color: inherit;
}

.full-width {
  width: 100%;
}

.half-width {
  width: 50%;
}

.full-width>.content>.third-parent {
  height: 100%;
  display: flex;
  flex-direction: row;
}

.full-width>.content>.third-parent>.third {
  position: relative;
  flex: 1 1 0px;
  border: 1px solid black;
  width: 100%;
}

.full-width>.content>.third-parent>.third>img {
  position: absolute;
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.middle-text {
  position: absolute;
  width: 100%;
  left: 50%;
  top: 50%;
  visibility: visible;
  text-align: center;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 {
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.full-width>.content>.third-parent>.third>.middle-text>.list-div2 li {
  position: relative;
  display: block;
  border: 1px solid red;
  margin-bottom: 5px;
  padding: 10px;
  text-align: center;
  text-transform: uppercase;
  visibility: visible;
  list-style-type: bullet;
}

.items-list2 {
  margin: 0;
  padding: 0;
}
<div class="container">
  <div class="full-width">
    <div class="content">
       <div class="third-parent">
         <div class="third" id="one">
           <img src="https://fakeimg.pl/350x200/?text=left">
          </div>
        <div class="third" id="two">
          <div class="middle-text">
            <h1>Headline</h1>
                  <div class="list-div2">
        <ul class="items-list2" id="list">
          <li>Entry A</li>
          <li>Entry B</li>
          <li>Entry C</li>
          <li>Entry D</li>
        </ul>
      </div>
          </div>
        </div>
        <div class="third" id="three">
          <img src="https://fakeimg.pl/350x200/?text=right">
        </div>
         </div>
       </div>
</div>
</div>
2
Eliya Cohen 15 sep. 2018 a las 12:53

En realidad, la hoja de estilo de agente de usuario tiene relleno restante. Por lo tanto, debe sobrescribir ese estilo con ul {padding-left: 0}

ul, menu, dir {
   display: block;
   list-style-type: disc;
   -webkit-margin-before: 1em;
   -webkit-margin-after: 1em;
   -webkit-margin-start: 0px;
   -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}
2
Ravi Kumar Gopalakrishnan 15 sep. 2018 a las 12:57