中心 DOM 在 li 内创建图像答案

【问题标题】：Center DOM created images inside a li中心 DOM 在 li 内创建图像
【发布时间】：2018-08-22 23:02:05
【问题描述】：

我在 javascript 中创建了一个小 todo 应用程序，它添加了一个新的 todo 并将其删除：

function addTodo() {
    var item = document.getElementById('input').value;
    var text = document.createTextNode(item);
    var newItem = document.createElement('li');
    newItem.appendChild(text);
    document.getElementById('todoList').appendChild(newItem);

    var removeTask = document.createElement('img');
    removeTask.setAttribute('src', '/images/trash.jpg');
    removeTask.setAttribute('id', 'trash');

    removeTask.addEventListener('click', function() {
        newItem.parentNode.removeChild(newItem);
    });
    newItem.appendChild(removeTask);
}

这里是html：

<!DOCTYPE html>
<html>
<head>
    <title>Todo list</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
    <form>
    <input type="text" id="input" placeholder="Enter an activity..">
    <button type="button" onclick="addTodo()" class="add-button">+</button>
    </form>
</header>
  <ol id="todoList">
  </ol>
    <script src="./scripts/index.js"></script>
</body>
</html>

创建新项目时，它会添加项目和删除 Todo 的垃圾桶，但正如您从照片中看到的那样，垃圾桶 img 比文本高一点，我希望它们都对齐完美，而不是垃圾图标更高。我怎么能用css做到这一点？我试图显示它们块，将边距顶部和位置设置为相对，但我仍然无法正确

【问题讨论】：

标签： html css

【解决方案1】：

检查这是否有帮助： Align image and text properly in HTML

并将其应用于您的 <img> 元素

【讨论】：

做到了，简单高效