PHP : PHP ใส่ข้อความหรือข้อมูลในรูป ในตำแหน่งที่ต้องการ

PHP : PHP ใส่ข้อความหรือข้อมูลในรูป ในตำแหน่งที่ต้องการ
ต้องใช้ CSS ช่วย
เช่น
Html

1. <div class="container">
2.   <img src="img_fjords_wide.jpg" alt="Norway" style="width:100%;">
3.   <div class="bottom-left">Bottom Left</div>
4.   <div class="top-left">Top Left</div>
5.   <div class="top-right">Top Right</div>
6.   <div class="bottom-right">Bottom Right</div>
7.   <div class="centered">Centered</div>
8. </div>
9.  

CSS

1. /* Container holding the image and the text */
2. .container {
3.     position: relative;
4.     text-align: center;
5.     color: white;
6. }
7.  
8. /* Bottom left text */
9. .bottom-left {
10.     position: absolute;
11.     bottom: 8px;
12.     left: 16px;
13. }
14.  
15. /* Top left text */
16. .top-left {
17.     position: absolute;
18.     top: 8px;
19.     left: 16px;
20. }
21.  
22. /* Top right text */
23. .top-right {
24.     position: absolute;
25.     top: 8px;
26.     right: 16px;
27. }
28.  
29. /* Bottom right text */
30. .bottom-right {
31.     position: absolute;
32.     bottom: 8px;
33.     right: 16px;
34. }
35.  
36. /* Centered text */
37. .centered {
38.     position: absolute;
39.     top: 50%;
40.     left: 50%;
41.     transform: translate(-50%, -50%);
42. }

https://www.w3schools.com/howto/howto_css_image_text.asp
เช่น FlangeDimensions ของออกแบบ
Html

1. <div class='container'>
2.   <img src='FLAT.jpg' alt='FLAT FACE' width='100%'>
3.   <div class='F_ODValue'>$OD</div>
4.   <div class='F_OCValue'>$OC</div>
5.   <div class='F_hValue'>$h</div>
6.   <div class='F_nValue'>$n</div>
7.   <div class='F_MValue'>$M</div>
8. </div> ";

CSS

1. /* Container holding the image and the text */
2. .container {
3.     position: relative;
4.     text-align: center;
5.     color: white;
6. }
7. /* FLAT FACE */
8. .F_ODValue {
9.     position: absolute;
10.     top: 19%;
11.     left: 37%;
12. }
13.  
14. .F_OCValue {
15.     position: absolute;
16.     top: 28%;
17.     left: 37%;
18. }
19.  
20. .F_hValue {
21.     position: absolute;
22.     top: 66%;
23.     left: 74%;
24. }
25.  
26. .F_nValue {
27.     position: absolute;
28.     top: 72%;
29.     left: 74%;
30. }
31.  
32. .F_MValue {
33.     position: absolute;
34.     top: 79%;
35.     left: 74%;
36. }
37.  
38. /* RAISED FACE */
39.  
40. .R_ODValue {
41.     position: absolute;
42.     top: 11%;
43.     left: 37%;
44. }
45.  
46. .R_OCValue {
47.     position: absolute;
48.     top: 20%;
49.     left: 37%;
50. }
51.  
52. .R_OGValue {
53.     position: absolute;
54.     top: 28%;
55.     left: 37%;
56. }
57.  
58. .R_hValue {
59.     position: absolute;
60.     top: 66%;
61.     left: 74%;
62. }
63.  
64. .R_nValue {
65.     position: absolute;
66.     top: 72%;
67.     left: 74%;
68. }
69.  
70. .R_MValue {
71.     position: absolute;
72.     top: 79%;
73.     left: 74%;
74. }