Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

Pictures based on jquery are centered up, down, left, and right in unknown containers at various resolutions_jquery

WBOY
Release： 2016-05-16 16:48:43
Original
1090 people have browsed it

DIV:

Copy code The code is as follows:





${pic.desc}







CSS:

Copy code The code is as follows:

.pic_conent{
height: 720px;/* This height will be changed by js*/
text-align: center;
display: table-cell;
vertical-align: middle;
}
.pic_layer{text-align: center; width:100%; display:inline-block; vertical-align:middle;}

jquery:

Copy code The code is as follows:

$(function() {
var surH = $(window).height();
$(".pic_conent").height(surH);
window.onresize=function(){
var surH = $(window).height() ;
$(".pic_conent").height(surH);
}
Related labels：
picture center
source：php.cn
Previous article：A simple progress bar effect example implemented by jquery_jquery Next article：Two multi-select selects (multiple left and right) add, delete options and value examples_jquery
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
1335
Regular expression to match words I have a script where I am trying to match new job names with existing job names in a data...
From 2024-04-06 21:24:04
0
1
606
Dynamically modify inline CSS styles in Javafx I'm trying to change the background image of a pane when the application is maximized. My ...
From 2024-04-06 20:57:16
0
1
487
Creating this specific design using a grid: a step-by-step guide I'm trying to create a layout similar to this image, I've tried using this grid but can't ...
From 2024-04-06 20:29:08
0
2
492
In mobile view, how can I close this navigation bar when the user clicks on the link? When the user clicks a link to browse the website, the navigation bar does not close? I've...
From 2024-04-06 19:23:03
0
1
411
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template