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>

我会接下来：

始终在屏幕左侧显示pciture
始终在父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。

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

尝试稍微分解您的不同问题，如果您仍有麻烦，请优先分别询问。祝你好运！

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

2 个答案: