我已经使用jsfiddle作为文件。幻灯片放在底部。我试图让它居中，但到目前为止它仍然在左边缘。 最终结果如下：https://jsfiddle.net/n6kae2rn/ https://jsfiddle.net/n6kae2rn/embedded/result/
.css-slideshow {
text-align:center;
position: relative;
max-width: 410px;
height: 730px;
}
.css-slideshow figure {
margin: 0;
position: absolute;
}
.css-slideshow figcaption {
position: absolute;
top: 0;
color: #fff;
background: rgba(0, 0, 0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
transition: opacity .5s;
opacity: 1;
}
.css-slideshow figure {
opacity:0;
}
figure:nth-child(1) {
animation: xfade 42s 32s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 16s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 8s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 0s infinite;
}
@keyframes xfade {
0% {
opacity: 1;
}
10.5% {
opacity:1;
}
20% {
opacity: 0;
}
98% {
opacity:0;
}
100% {
opacity:1;
}
}
div.poster {
background: url(http://jillun.com/dp-intsmall.jpg) repeat;
padding: 25px;
}
答案 0 :(得分：0)
您是否尝试将margin : 0 auto;添加到css-slideshow课程？
但你必须确保图像的宽度相等。否则，即使css-slideshow居中，较宽的图像也会向右移动。
.css-slideshow {
text-align: center;
position: relative;
max-width: 410px;
height: 730px;
margin: 0 auto;
}
.css-slideshow figure {
margin: 0;
position: absolute;
}
.css-slideshow figcaption {
position: absolute;
top: 0;
color: #fff;
background: rgba(0, 0, 0, .3);
font-size: .8em;
padding: 8px 12px;
opacity: 0;
transition: opacity .5s;
}
.css-slideshow:hover figure figcaption {
transition: opacity .5s;
opacity: 1;
}
.css-slideshow figure {
opacity: 0;
}
figure:nth-child(1) {
animation: xfade 42s 32s infinite;
}
figure:nth-child(2) {
animation: xfade 48s 24s infinite;
}
figure:nth-child(3) {
animation: xfade 48s 16s infinite;
}
figure:nth-child(4) {
animation: xfade 48s 8s infinite;
}
figure:nth-child(5) {
animation: xfade 48s 0s infinite;
}
@keyframes xfade {
0% {
opacity: 1;
}
10.5% {
opacity: 1;
}
20% {
opacity: 0;
}
98% {
opacity: 0;
}
100% {
opacity: 1;
}
}
div.poster {
background: url(http://jillun.com/dp-intsmall.jpg) repeat;
padding: 25px;
}
div.fade {
margin: 10px;
padding: 15px;
background-color: #ffffff;
opacity: 0.8;
filter: alpha(opacity=60);
/* For IE8 and earlier */
}
h1 {
text-align: center;
display: block;
font-size: 3em;
font-weight: bold;
}<title>Highlander: Dark Places Interview Andrew Modeen</title>
<body>
<div class="poster">
<div class="fade">
<h1>Interview with Andrew Modeen</h1>
August 10, 2015
<p>JS: As a Highlander fan, I am delighted that you are creating this film. The most recent trailer showed an excellent Quickening scene, and the narrator's voice was a pleasure to listen to, though someone I know said he made her think of Darth Vader.
<p>
<b>AM: (low chuckle)</b>
<br>***later explanation proved the narration to have been done by three men. Richard Ridings (Silas), Marcus Testory (Caspian), and James Cheung (Methos-impersonator)
<p>JS: I am aware that you are a fan, and a true fan. I've enjoyed your YouTube series, "The Connor and Duncan Show." But what made you choose to do this Highlander film?
<p>
<b>AM: Hey, I'm a huge fan. Largely, the opportunity. There was a big thing in the second season of the Blu Rays, where they
threw out to the fans "Hey, do you want to do a Watcher documentary? Do you want to do a video commentary?" I picked
the Watcher documentary. More in the guise of a film, and afterwards my colleague, Jeremy Orr, sealed a deal to do
"Highlander: The Watcher." And I'm not gonna lie, I was a little bit jealous, like "Oh! This sounds like a lot of fun! This would
be... I could probably do something in line with that, in my own way." And I sought them out. I was kind of the squeaky
wheel, as it were. And eventually they said "Okay, fine. Let's roll with this." And I couldn't have been more excited.</b>
<p>JS: Are your films strongly based in the Highlander TV series canon?
<p>
<b>AM: Yes. I would almost go so far as to say slavishly, but not quite to that effect. But definitely grounded in the series
canon as we know it. In the Highlander 1, 3, the series, Endgame... we won't bring The Source into the equation because
that's just... yeah, that is what it is, though it's out there. Yeah, but Dark Places is intended to be part of the canon,
absolutely.</b>
<p>JS: You could always run it past Andy Sloane. He has every canon memorized! He's awesome.
<p>
<b>AM: Yes, (laughing) Sloane is a good man.</b>
<p>JS: How did you go about getting permission from Davis? -- well you just told me - to get to play legally in the Highlander Universe: by begging them!
<p>
<b>AM: Yeah, basically it was a lot of that.</b>
<p>JS: You have a contract that legally allows you to do this.
<p>
<b>AM: Yes, we have a deal memo actually two deal memos at this point, to go ahead and do that. Again, it did change from
four short films to one full feature, so there is a bit of a revision in there, but yes, we do.</b>
<p>JS: Was there anything they insisted had to be included in your film?
<p>
<b>AM: Not at all. However they did stipulate that I could not use the Watchers, because Jeremy Orr's film is called "The
Watcher" and everything that entails, they wanted us not to do all that similar kind of stuff. Which I was fine with. I actually
didn't really intend to use the Watchers anyway. I mean, if left to my own devices I might have had a side character that was
a Watcher -- maybe -- but it really wasn't on my brain, so I wasn't too worried about that. So I was more than okay with that
one stipulation.</b>
<p>JS: Very nice. I am delighted to see F. Braun McAsh in your production, playing Hans Kirschner.
<p>
<b>AM: Yes, reprising the role!</b>
<p>JS: Was it very difficult to reach him for this?
<p>
<b>AM: Not entirely. Well, I reached out to a few different people, to try and get a hold of him secondhand. I actually
reached him through Robert Chapin, who does The Hunted stuff on YouTube, and he put me in touch with him and reached
back to me and everything was amicable, we set it up, he was a perfect gentleman for a weekend, delightful stories (chuckle).
Probably one of the best experiences I had, in quite some time. Total professional.</b>
<p>JS: That's wonderful. Is Kirschner's part related to Mr. McAsh's story in "An Evening at Joe's"?
<p>
<b>AM: Yes, in fact there're whole lines of dialogue pulled directly from there. It's very spiritually in line with what he wrote,
however there are some deviations... I won't tell you what those are, but basically the beauty of the story within "An Evening
at Joe's" is that it's this Watcher chronicle being read and the story could be subjective, so I kind of play with that a little bit.
A lot of what he wrote is in there, in fact literally, but it goes a different way. Not largely, but to some degree.</b>
<p>JS: How did you collect your actors for this production? How did you get them?
<p>
<b>AM: Ah! A bit of a mixmash. We had... it's a long story. We had a production crew that came on, we did auditions for the
leads, I had some people that I knew that would fill other roles, as did they, and we kind of went from there. We had the four
short films, which are now the full feature, but even within those, it was more of a -- we have the lead roles, which we will
have people audition for, and the other ones that could probably be filled by people referred by others. We'll fill them out, of
course, but they're not as critical as the other roles. We've had the lead villain, George -- playing Vlad/Keradoc. He was so
excited to do this he flew down from Michigan. The guy's a lawyer in his day-to-day, and he knocked it out of the park!</b>
<p>JS: That's wonderful! How do you spell Keradoc?
<p>
<b>AM: K-E-R-A-D-O-C. It's a brick from the Welsh story with Ceradoc with a 'c' but you gotta have your K'immie, so... he's a
K'immie.</b>
<p>JS: Ah, poor Dracula. Alas, I did not know him. (laughs)
<p>On the IMDB you are credited as director, film editor, and you play the character John Mosby. Why is your character named John Mosby?
<p>
<b>AM: (laughing) Well, there's no two ways about it. It's kind of a nod to the actual John Mosby, who's a great guy,
awesome speaker. We met in Vancouver, in L.A. and he's the life of the party and I just wanted to give a little nod to him, and
why not.</b>
<p>JS: I take it that the John Mosby character is in the movie for a very short time?
<p>
<b>AM: Yeah, it's not a large role by any means. He may or may not go off into the sunset but, yeah, it's a very short part and
it's just a quick throwaway - nah, I'm saying too much, suffice to say.</b>
<p>JS: Did being both director and editor make it easier to create, or more difficult for you?
<p>
<b>AM: With the film largely in the rearview at this point, I'd venture that it was largely easier, with the caveat of an added
measure of stress. Which wasn't every shoot. While there were very stressful shoots jam-packed with things, breezy shoots
that were very relaxed, and back-to-back days that never quite 100% went according to plan, that's kind of the nature of films
like these shooting by the seat of our pants. But to answer your question, it's a good way to ensure the original vision saw
through to conception to finalization, though I have a number of editors doing the editing on a number of scenes on the back
end of things, many of which began as 100% greenscreen.</b>
<p>JS: Once you had the scripts for your picture, were you able to keep almost everything? Did you have to remove a great deal? This would be pre-throwing the four pieces together into one.
<p>
<b>AM: Well, that's the good part about being the writer/director/producer. I get to say "No, we're keeping that." "But why-"
"No, we're keeping it." No, there're definitely things that've been excised, particularly from the first movie, but from the
script to the screen, there're quite a few scenes that didn't make the cut. Some of which I mourn, others of which I look back
and go "Well, you know what, yeah we didn't need that." In fact, as we're wrapping down to the final production phase,
there's gonna be a lot more on the cutting room floor, definitely.</b>
<p>JS: In articles about movie scores, writers talk about how important music is to the enhancement of plot and character perception. Has it been very difficult to choose music for your
film?
<p>
<b>AM: Ah, well I was lucky I had a really good composer, Mark Blasco. He's done all the scores for the first of the three parts
of four. Hope to work with him again. Yeah, he's very brilliant, he even brought in a third-party singer, Tai Shan, who actually
did a re-recording of Bonnie Portmore, actually three different versions of it for the third part, which probably will re-surface
in the fourth. Basically, timed to the beat. I didn't offer a lot of direction - well, I kind of didn't. In certain scenes I... was a bit
in love with the third one, kind of illustrating the story of the young lady, you'll see, with tones of Bonnie Portmore in
different ways and more diabolical tones with the bad guys here and there, but not much else than that. More of an "I like
this, more of this," and "I would like a beat here or there", not much else.</b>
<p>JS: What were the most difficult scenes to film?
<p>
<b>AM: Actually, that's a very easy question. There was one scene in particular. The climax of the first short, which is now the
first chapter of four, again. We had this all arranged, literally with the government, here. We had a factory in Auburn, we had
the go-ahead to shoot there from 10 until whenever we felt like leaving, I guess. Yeah, we were there shooting our big
climactic sword fight there. We got makeup ladies, we got craft services, we got all kinds of - you name it we had it, and we're
about an hour in and guess what happens. The lights go out. The lights just shut out. Ch-chung. Yes, there was really that
sound effect. The lights went out, and we're left there wondering what the hell we're gonna do at this point. So, after about
another hour of trying to fight with the lights to get them to turn on and giving up, and no one's answering the phone of
course at this time, we kinda go outside and look outside. There's a railroad track, there's lights on. All right, I guess we can
film here. We can have our elaborate fight with guys jumping off pallets and stuff and I guess we can move it out here. It
hurt, but you know what, it actually came out really cool. Maybe it's a happy coincidence, but it actually came out really well.
It was very, very frustrating that night and everyone pulled together wonderfully, though.</b>
<p>JS: I know that special effects are expensive and very hard to create. I understand that filming in front of a green screen is a true challenge for actors. How do you help
them get into the spirit of the scene?
<p>
<b>AM: Yes, there was a pretty solid week in Lynnwood, we're in a hot-ass garage in the height of summer with all of these
lights going with a little bit of other shooting afterwards, too, at another location, but yeah. There's no doubt about it. No
two ways about it, that is a challenge. All you can really do at that point is walk them through the scene, tell them what
they're looking at, hope for the best if they don't get it right. Do it again, do it again, hoping they don't get frustrated and
kind of give up, which is what I would probably do, which is why I'm not an actor, but...</b>
<p>JS: You're a director, man! (Laughing) If you'd give up that easy, yeah.
<p>
<b>AM: Yeah, just a lot of that.</b>
<p>JS: What were your favorite scenes to film? Maybe the bloopers.
<p>
<b>AM: Ah! Yeah, that's a happy coincidence! My favorite scene to film. The flaming sword fight on the beach was kind of
cool. It was raining. We had just enough gas to make that work. It was a small miracle that happened. Other than that,
Gasworks Park was fun. With Erika and Colin Remillard, that was really cool to shoot. What was the least fun, I'd probably
venture, was the boiler room of the hotel I work at, that we actually did the climax of the second part. It was the height of
summer, hot as hell, and literally on top of that all, we're there next to - guess what - the boiler, so it's just cooking us out and
yeah, I could have done without that, but it came out great. Looks awesome. Oh, and probably the airplane hangar in Renton
at Boeing! That was a big coup. That was really cool to show that. Really great we got the opportunity to. Actually my
fourth-grade teacher reached out to me when I was kind of feeling out people on Facebook going "Hey, we kind of need this
location for the final fight of the third film!" He hit me back, scored the location, it came out great.</b>
<p>JS: These were supposed to be on the Blu Ray release of later seasons of Highlander, but now those do not seem to be in the offing. Being as this is an independently
produced movie, it must be very difficult to get it out to the viewing audience. Highlander fans such as myself are really looking forward to seeing this. Is
there any way we can help?
<p>
<b>AM: Not really at this point. I mean, all the budgetary concerns are taken care of. To give kind of a timeline of events: Yes,
it was supposed to go on the Blu Rays of the series. It was supposed to be the first part on Season 4, second one on Season 5,
and the last two on Season 6 'cuz that one's kind of lightly loaded. But then, after the third season, for whatever reason they
did not decide to continue those. So we were left with this deal, you have these films we're doing, myself and Jeremy Orr,
and now we're left in this position like... and everyone's asking us, of course, the cast and crew alike, "Hey, where are these
going? What's going on?" We don't really have a good answer. So we do go back to Davis, and we see what we can do. Our
collective vote was something like "Methos Rocks!" Could we put these out independently, under their umbrella, of course.
"Can we do that? Is that okay?" And they basically said "Yes. You can unite these as full features and put them out that way.
We will give you a deal memo." They're coming out on CreateSpace, which is a sublet of Amazon. Basically, we submit them
there, you place an order, they print it, they ship it to you, it doesn't cost anything. And it goes out to fans directly. There will
be a digital download as well, Blu Ray quality, but the actual tactile that you order, that'll only be DVD, because of rights-
things with Blu Ray, that costs a lot more for them, so they don't do that.</b>
<p>JS: When is it likely that Highlander: Dark Places will have a website?
<p>
<b>AM: No plans per se. I mean, we have the FaceBook page that kind of got merged with the other ones. In terms of
actually making a website, no real plans per se. I don't think Jeremy has, either, for The Watcher. It might be a good idea. I
mean, we'll look into it as we get closer actually putting it out there. I think he's a lot closer than I am. I'll probably follow his
lead, whatever he decides.</b>
<p>JS: What would you like us to take away from this film?
<p>
<b>AM: Well, without giving away too much of the story, it kind of gets into a lot of things. A new Immortal in the midst.
How do they come about. A Richie-kind of a story, with a very different spin, with a very different kind of Immortal nemesis
figure, who -- I'll go ahead and say it, it's Vlad the Impaler. It's an Immortal Vlad the Impaler who's stalking down through the
ages and is very much weighing heavily on everyone and everything here. He's pretty much pulling all of the strings. But the
long and short of it is this is just a new story in the Highlander mythos. It's part of the canon. It's meant to fit into things. It's
one more story in an age where we have... not a whole lot left to look forward to aside from the remake which I'm cautiously
optimistic about. It could be great. I've read the first two scripts. Could be great.</b>
<p>JS: You got to read scripts! Jealous!
<p>
<b>AM: (laughs) We'll see. Well, it's a good thing they dropped the gunplay. That was a big thing from the first draft. The
Immortal's like "Do I use my sword or my gun, I don't know." They dropped that, so that's cool, but, uh. Good things. Let's
hope for those. You know, there's some returning people in Dark Places. There's F. Braun McAsh; might be a minor cameo
from someone else that's kind of large, but you'll have to watch it and see.</b>
<p>JS: I always thought Adrian Paul could play Ramirez.
<p>
<b>AM: Oh he totally could! He's got the presence.</b>
<p>JS: And the age.
<p>
<b>AM: My personal vote, though, is Antonio Banderas. He's got the presence and the physicality, I think. One has to only
look at only his Zorro stuff if nothing else.</b>
<p>JS: He's also older now. Aren't they all. Aren't WE all.
<p>
<b>AM: Yeah! You're telling me.</b>
<p>JS: What were you, ten?
<p>
<b>AM: When the first one came out?</b>
<p>JS: You're a wee bit younger than I am.
<p>
<b>AM: I was four when the first one came out.</b>
<p>JS: Four! Not that bad. Alright, I think this is a good point to conclude our interview. Do you have any final words for us?
<p>
<b>AM: Yeah! Check us out on <a
href=https://www.facebook.com/highlanderdarkplaces>https://www.facebook.com/highlanderdarkplaces</a> for all
updates and new things with that movie as we come to a conclusion.</b>
</div>
<div class="css-slideshow">
<figure>
<img src="http://jillun.com/dpint5.JPG" width="338" height="313" />
<figcaption><strong>Still lunatics!</strong>
</figcaption>
</figure>
<figure>
<img src="http://jillun.com/dpint3.JPG" width="590" height="320" />
<figcaption><strong>Two lunatics</strong>
</figcaption>
</figure>
<figure>
<img src="http://jillun.com/dpint2.JPG" width="730" height="266" />
<figcaption><strong>Shining Blades</strong>
</figcaption>
</figure>
<figure>
<img src="http://jillun.com/dpint4.JPG" width="730" height="410" />
<figcaption><strong>Blade and Bokken</strong>
</figcaption>
</figure>
<figure>
<img src="http://jillun.com/dpint1.JPG" width="730" height="410" />
<figcaption><strong>Hilts of the blades</strong>
</figcaption>
</figure>
</div>
</div>
</body>
</html>
答案 1 :(得分：0)
在<div class="css-container">上方添加<div class="css-slideshow">。不要忘记在css-slideshow之后添加另一个</div>。
然后更改你的CSS以反映这一点：
.css-slideshow {
text-align:center;
position: relative;
max-width: 410px;
height: 730px;
margin: auto;
}
.css-container {
width: 100%;
}
这会在页面上创建一个全宽容器元素。然后你的幻灯片CSS理解文本对齐元素到中心，最后自动填充边距。
希望它有所帮助。