周期2上一个和下一个

Question

Good evening, I'm using cycle2 with the prev and next function, but I cannot centre the prev and next function under the images. 晚上好，我在使用带有prev和next函数的cycle2，但是我无法将prev和next函数放在图像的中央。 I've looked around and I know its going to be something stupid, but I just cannot see it. 我环顾四周，我知道它会很蠢，但是我看不到它。 Very frustrating. 非常沮丧。 Thanks Gary 谢谢加里

 <script src="../../respond.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="http://malsup.github.com/jquery.cycle2.js"></script> <script src="http://malsup.github.io/jquery.cycle2.center.js"></script>

 @charset "UTF-8"; /* Simple fluid media Note: Fluid media requires that you remove the media's height and width attributes from the HTML http://www.alistapart.com/articles/fluid-images/ */ img, object, embed, video { max-width: 100%; } /* IE 6 does not support max-width so default to width 100% */ .ie6 img { width:100%; } /* Dreamweaver Fluid Grid Properties ---------------------------------- dw-num-cols-mobile: 4; dw-num-cols-tablet: 8; dw-num-cols-desktop: 12; dw-gutter-percentage: 25; Inspiration from "Responsive Web Design" by Ethan Marcotte http://www.alistapart.com/articles/responsive-web-design and Golden Grid System by Joni Korpi http://goldengridsystem.com/ */ .fluid { clear: both; margin-left: 0; width: 100%; float: left; display: block; } .fluidList { list-style:none; list-style-image:none; margin:0; padding:0; } /* Mobile Layout: 480px and below. */ .gridContainer { margin-left: auto; margin-right: auto; width: 86.45%; padding-left: 2.275%; padding-right: 2.275%; clear: none; float: none; } #div1 { } .gallery { } .zeroMargin_mobile { margin-left: 0; } .hide_mobile { display: none; } /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */ @media only screen and (min-width: 481px) { .gridContainer { width: 90.675%; padding-left: 1.1625%; padding-right: 1.1625%; clear: none; float: none; margin-left: auto; } #div1 { } .gallery { } .hide_tablet { display: none; } .zeroMargin_tablet { margin-left: 0; } } /* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */ @media only screen and (min-width: 769px) { .gridContainer { width: 88.5%; max-width: 1232px; padding-left: 0.75%; padding-right: 0.75%; margin: auto; clear: none; float: none; margin-left: auto; } #div1 { } .gallery { } .zeroMargin_desktop { margin-left: 0; } .hide_desktop { display: none; }

 <body> <div class="gridContainer clearfix"> <div id="div1" class="fluid"></div> <div class="fluid gallery"> <br /> <br /> <div class="cycle-slideshow" data-cycle-fx="scrollHorz" data-cycle-timeout="0" data-cycle-prev="#prev" data-cycle-next="#next" data-cycle-center-horz=true data-cycle-center-vert=true > <img src="http://malsup.github.io/images/p1.jpg"> <img src="http://malsup.github.io/images/p2.jpg"> <img src="http://malsup.github.io/images/p3.jpg"> <img src="http://malsup.github.io/images/p4.jpg"> </div> <br /> <br /> <div class="center"> <span style="text-align: center; text-decoration: none; font:open-sans; font-size:12px; color:#000000;"> <a href=# id="prev">Prev</a> <a href=# id="next">Next</a></span> </div> </div> </div> </body>

Answer 1

You need to add text-align center to the container div: 您需要将文本对齐中心添加到容器div中：

div.center {text-align:center;}

https://jsfiddle.net/dw25LLzc/ https://jsfiddle.net/dw25LLzc/

周期2上一个和下一个

问题描述

1 个解决方案

解决方案1
1 2016-11-12 23:04:23

周期2上一个和下一个

问题描述

1 个解决方案

解决方案1 1 2016-11-12 23:04:23

解决方案1
1 2016-11-12 23:04:23