HTML - padding-left 但保持文本居中答案

【问题标题】：HTML - padding-left but keep text centeredHTML - padding-left 但保持文本居中
【发布时间】：2017-01-06 15:51:43
【问题描述】：

我有以下 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 的垂直中心显示图片
居中文本（标题和注释）始终位于屏幕的中心
文字不应覆盖图片

我该怎么做？

【问题讨论】：

标签： html css layout styles

【解决方案1】：

也许你可以为图片设置z-index:100;，为文字设置z-index:50; 所以它不会覆盖。

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

用于按住左侧图片：left:0; 或float:left;

希望对你有帮助

【讨论】：

【解决方案2】：

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

.taskTitle {
    overflow: hidden;
}

还有关于你的任务注意class。如果您希望 font-size 适合其父容器，您将处理它。

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

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

【讨论】：