Вертикальное выравнивание текста и плавающих изображений в центрированном списке JavaScript созданных массивов - PullRequest
Новая
       15

Вертикальное выравнивание текста и плавающих изображений в центрированном списке JavaScript созданных массивов

0 голосов
/ 11 января 2020

Я прочитал здесь десятки руководств, учебных пособий, инструкций и разных вопросов, но я не могу заставить что-либо работать. Я нахожу вертикальное выравнивание довольно сложным?

Я просто хочу, чтобы это было так, чтобы слова и значок не были совершенно не в порядке. Я пробовал flex, пробовал таблицы, блоки и деления в различных комбинациях. Я просто хочу квадрат в середине страницы, текст в середине и изображение справа. Такое чувство, что каждый раз, когда одна вещь правильна, другая вещь облажается, я пытаюсь исправить это, и другая вещь портится.

Я сократил его до этого фрагмента кода, который демонстрирует мою проблему. 

var Opgaver = ["Opgave 1", "Opgave 2", "Opgave 3"];
Taskmaster()

function Taskmaster() {
  document.getElementById('Liste').innerHTML = "";
  for (i = 0; i < Opgaver.length; i++) {
    OpgaveElement(i)
  }
}
function OpgaveElement(id) {
this.img = document.createElement("img");
this.img.src = "https://previews.dropbox.com/p/thumb/AAr7bXcqNLEaJ8NfQ_spAPxlofG9QGF-iFYh6Caxe4QV3Jf2j60qyU92KChJauMH-TfnSFHhiJjvUJAgbHhXL4a4-UqiuRNLQpXlS_QqLWE6YXfY_tt37JnnoEefL04wGi91EVPzWBsQLyKjGDW71G5drfLkSSCT_aEmk41k70iFwDnOST4IfD6wXRy4d7Aj16FiH2JR4Kp0coN0QEpBCQNBQVPKbojwUSV6PwfT7sQ1dlvtKLTPDXo5a1nMSh6SHJyKXoAE6XMRlhQmWTwfNwC7fHP1q019nLt9xmsP7Ke9TiYiT_Q3ulA6uWMAVhXTW_pThy8rOIEA8TasoeU8wzLmvuGTf-5EDoD0Err4FvyONQ/p.png";
 this.img.setAttribute('class', 'close');
  var opg = document.createElement('li');
  var opgnvn = document.createTextNode(Opgaver[id]);
  opg.appendChild(opgnvn);
  opg.appendChild(this.img);
  document.getElementById('Liste').append(opg);
opg.setAttribute('class', 'regular');
}
img {
  width: 58px; 
}

.close {
  float: right;
}

.regular {
  margin: auto;
  border-radius: 5px;
  width: 50%;
  background-color: turquoise;
  border-style: solid;
  text-align: center;
  list-style: none;
  margin-top: 1%;
  padding: 1%;
  font-size: 25pt;
}
<body>
        <div id="Liste"></div>
</body>

1 Ответ

1 голос
/ 11 января 2020

Вот комбинация Flexbox и позиционирования, которая правильно выравнивает элементы. Пример кодекса . Надеюсь, это поможет.

HTML

<ul>
   <li>
       <span>OI</span>
       <svg viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
   </li>
   <li>
       <span>vand</span>
       <svg viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
   </li>
   <li>
       <span>te</span>
       <svg viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"></path></svg>
   </li>
</ul>

CSS

ul {
    display: flex;
    flex-flow: column;
    padding: 0;
    list-style: none;
}
ul li {
    display: flex;
    width: 400px;
    margin-bottom: 10px;
    padding: 10px;
    position: relative;
    background-color: turquoise;
    border: 4px solid;
    border-radius: 8px;
}
ul li span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-family: Helvetica;
}
ul li svg {
    width: 28px;
    height: auto;
    margin-left: auto;
}
...