you want to place a picture in the vertical center of the page, with some text on top of the picture. If you want pictures and text, you can scale according to the size of the screen.
do you have any good ideas for implementation?
place your content inside div
.div {
position: absolute;
top:30%;
right: 30%;
bottom: 30%;
left: 30%;
}html, body {
width: 100%;
height: 100%;
}
div {
width: 20%;
height: 20%;
margin-top: 50%;
transform: translateY(-50%);
} 1. The size of the picture and text can be set as a percentage or rem, and will be scaled according to the screen size.
2, is centered horizontally and vertically. For more information, please see
parent container display:flex;justify-content:center;align-content:center;
div {
position: absolute;
top: 0; bottom:0; left: 0; right:0;
width: 50%; height: 50%;
margin: auto;
background: red;
}good compatibility and simple style
on ios10 devices, the full-screen button for video tag video is incomplete. ...
there is a problem that has been bothering me. The page is as follows, which is a simple html code-generated page. The page contains a div, in the body tag. I artificially make the body scrollable and the div content scrollable. the effect of the page...
AA: .. src opms resource + image opus 1531812188HEWIU.jpg , bb: .. src opms resource image opus 1531812188HEWIU.jpg , ...
the first request method: let customer_id = localStorage.getItem( customer_id ) this.$http.post( health_record health_status_list.do ,customer_id) the data returned from the request in this way is empty : problem description the environm...
problem description sharing on Android phones is the specified index page, while on iOS phones is the link to the current page the environmental background of the problems and what methods you have tried use the QQAPI method of mobile phone rela...
from the previous week to now, I found a problem: when the whole network accesses the url address, it always gets stuck somewhere, and the page cannot be loaded. Later, F12 called up the console and found that there was an abnormal js file access. At th...
can be downloaded in Google browser, but it doesn t work in IEdownload. Is there a solution? <span class="img"><a :href="imgurl" :download="this.data.examName"><img src=".. .. .. assets images wechat.p...
how is the page title added in Wechat official account development? I used title instead of " ....