HTML - 左填充，但保持文本居中

Question

我有以下HTML和CSS：

#page {
  background-color: #000;
  color: #fff;
  height: 360px;
  width: 360px;
  min-height: 100%;
}
#viewport {
  font-size: 20pt;
  text-align: center;
}
.taskTitle {
  height: 13%;
  font-weight: bold;
  font-size: 30pt;
  white-space: nowrap;
  display: inline-block;
}
.taskNote {
  color: gray;
  white-space: nowrap;
}

<div id="page">
  <div id="viewport">
    <div id="task-view">
      <div style="width: 100%; background-color: aqua; position: relative;">
        <img style="background-color: blue; position: absolute; left :0%; top: 50%; transform: translate(-0%, -50%);" src="./image/tw_btn_radio_holo_dark.png"></img>
        <div style="width: 100%; background-color: red;">
          <div class="taskTitle" id="taskTitle1" style="background-color: green; width: 100%">Long text overlays picture :(</div>
          <div class="taskNote" id="taskNote1">My Note 1</div>
        </div>
      </div>
      <div style="width: 100%; background-color: orange; position: relative;">
        <img style="background-color: blue; position: absolute; left :0%; top: 50%; transform: translate(-0%, -50%);" src="./image/tw_btn_radio_holo_dark.png"></img>
        <div style="width: 100%; background-color: red;">
          <div style="background-color: green;" class="taskTitle" id="taskTitle2">Short</div>
          <div class="taskNote" id="taskNote2">Short text should always centerd in page!</div>
        </div>
      </div>
    </div>
  </div>
</div>

我会有以下几点：

• 始终在屏幕左侧显示图片
• 始终在父div 的垂直中心显示图片
• 文本（标题和注释）始终位于屏幕中央
• 文字不应覆盖图片

我该怎么做？

Answer 1

也许您可以为图片和文本设置z-index:100; z-index:50;所以它确实覆盖。

对于居中，请使用<center></center>或margin-left:auto; margin-right:auto;

用于将图片放在左侧：left:0;或float:left;

希望这有帮助

Answer 2

您可以将它用于溢出图像的文本：

.taskTitle {
    overflow: hidden;
}

在您的任务上也注意到class。如果您希望font-size适合其父容器，您将处理该。

有关CSS alignment和positioning的更多信息，请参阅Chris Coyier撰写的这篇文章：CSS-Tricks.com

尝试稍微分解一下您的不同问题，如果您仍然遇到麻烦，请按优先级单独提出。祝你好运！