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
• центр Text (Название и примечание) всегда в центре экрана
• Текст не должен перекрывать изображение

Как я могу это сделать?

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; 
} 

И на вашей задачеNote class a зыбь. Вы собираетесь обрабатывать font-size, если хотите, чтобы он соответствовал его родительскому контейнеру.

Более подробную информацию о alignment и positioning в CSS см это article написанный Крисом Coyier по адресу: CSS-Tricks.com

Try, чтобы сломать ваши различные вопросы немного, и если вы все еще есть проблемы спросить их по отдельности по приоритету. Удачи!