Vertically aligning text and floating images in a centered JavaScript-created array list
Question
I've read dozens of guides, tutorials, howtos and assorted questions here but I cannot get anything to work. I am finding vertical alignment rather complicated?
I just want it to be so that the words and the icon isn't completely out of whack. I've tried flex, I've tried tables and blocks and divs in various combinations. I just want the square in the middle of the page, the text in the middle and the img on the right. It feels like, every time one thing is right, another thing screws up, I try to fix it and another thing messes up.
I've shortened it down to this code snippet that demonstrates my problem.
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 answers
solution1
1 2020-01-11 18:29:02
Here is a combination of Flexbox and positioning that aligns the elements correctly. Codepen example . Hope it helps.
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.