在居中的JavaScript创建的数组列表中垂直对齐文本和浮动图像

问题描述 投票：1回答：1

我在这里阅读了许多指南，教程，howtos和各种问题，但是我什么都无法工作。我发现垂直对齐相当复杂吗？

我只是希望它是这样，以使单词和图标不会完全不合时宜。我试过flex，试过各种组合的表，块和div。我只想要页面中间的正方形，中间的文本和右侧的img。感觉就像每当一件事情是对的，另一件事情搞砸了，我试图修复它，另一件事情搞砸了。

我将其简化为演示我问题的代码段。

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>
javascript css vertical-alignment
1个回答
1
投票

这里是Flexbox和定位的结合，可以正确对齐元素。 Codepen example。希望对您有所帮助。

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;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.