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>

我將有如下：

• 顯示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 a脹。如果您希望它適合其父容器，您將要處理font-size。

對於CSS更多alignment和positioning，看到這個article在由克里斯·Coyier寫：CSS-Tricks.com

嘗試打破你的不同的問題了一下，如果你仍然有麻煩分別要求他們按優先級。祝你好運！