Here are the HTML and CSS code snippets I am working with:
#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>I have some requirements for the layout:
- The picture should always be displayed on the left side of the screen
- The picture should always be vertically centered in its parent div
- The text (Title and Note) should always be centered on the screen
- The text should not overlap with the picture
How can I achieve these layout specifications?