At the last “column” that is named “display 1 column” I am trying to figure out how to get the images centered. I have tried with align=“middle” but that is not working. And I have searched around on the internet and in my books but I can’t figured it out.
(Sorry for my bad english writing. haha)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blushop</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family:"Times New Roman", Times, serif;
}
#header{
color: #00FFFF;
background-color: rgb(56,59,63); /*fallback background-color*/
margin: 0px auto;}
#page {
color: rgb(230, 231, 232);
background-color: rgb(56,59,63); /*fallback background-color*/
margin:0px auto;
overflow: hidden;
}
.moviewrapper {
background-color: rgb(56,59,63); /*fallback color*/
background-color: hsl(0,0%,90%);
margin:10px;
float:left;
display:inline;
}
.moviecover {
background-position:center;}
img {
background-position: center;
margin:0px 20px 10px 20px;}
h1 {
color: rgb(0,177,239);
font-size: 120px;
font-weight:100;
letter-spacing: 0.02em;
text-align:center;
margin:0px;
padding:20px;
border:0px;
}
h6 {
color: rgb(56,59,63); /*fallback color*/
font-size: 15px;
text-align:center;
padding:10px;}
p {
color: rgb(56,59,63); /*fallback background-color*/
font-size: 14px;
padding: 0px 10px 0px 10px;
display: none;}
@media screen and (min-width: 1280px)
{
/*display 4 columns*/
#page {
width:1260px;
height: auto;}
.moviewrapper {
width:295px;
height:auto;}
img {
width:255px;}
p {
display: inline-block;}
}
@media screen and (min-width: 500px) and (max-width: 1279px)
{
/*display 3 columns*/
#page {
width:960px;
height: 630px;}
.moviewrapper {
width:300px;
height:430px;}
img {
width:260px;
height:310px;}
p {
display:none;}
}
@media screen and (max-width: 500px)
{
/*display 1 column*/
#page {
width:100%;
height:auto;}
.moviewrapper
{
width:96%;}
div {
display:block;}
img {
width:70%;
}
h1 {
font-size: 36px;
text-align: left;}
p {
display:none;}
}
</style>
</head>
<body>
<div id="page">
<div id="Header">
<h1>BluShop</h1>
</div>
<article>
<div class="moviewrapper">
<h6>World War Z</h6>
<div class="moviecover">
<img src="worldWarZ.jpg" width="210" height="260" alt="worldwarz" align="bottom" >
<p>Few monsters lend themselves better to allegory than the zombie. In the years since George Romero first set the shambling mold with Night of the Living Dead, filmmakers have been using the undead as handy substitutes for concepts as varied as mall-walking consumers, punk rockers, soccer hooligans, and every political movement imaginable. (All this, plus brain chomping.) World War Z, the mega-scale adaptation of Max Brooks's richly detailed faux-historical novel, presents a zombie apocalypse on a ginormous level never seen before on film. Somehow, however, the sheer size of the scenario, coupled with a distinct lack of visceral explicitness, ends up blunting much of the metaphoric impact.</p>
</article>
<article>
<div class="moviewrapper">
<h6>Star Trek</h6>
<div class="moviecover">
<img src="starTrek.jpg" alt="startrek" width="210" height="260" align="bottom"> <p> When the crew of the Enterprise is called back home, they find an unstoppable force of terror from within their own organization has detonated the fleet and everything it stands for, leaving our world in a state of crisis. With a personal score to settle, Captain Kirk leads a manhunt to a war-zone world to capture a one man weapon of mass destruction. As our heroes are propelled into an epic chess game of life and death, love will be challenged, friendships will be torn apart, and sacrifices must be made for the only family Kirk has left: his crew</p>
</article>
<article>
<div class="moviewrapper">
<h6>Pacific Rim</h6>
<div class="moviecover">
<img src="pacificRim.jpg" width="210" height="260" align="bottom" alt="pacificrim"> <p>When legions of monstrous creatures, known as Kaiju, started rising from the sea, a war began that would take millions of lives and consume humanity's resources for years on end. To combat the giant Kaiju, a special type of weapon was devised: massive robots, called Jaegers, which are controlled simultaneously by two pilots whose minds are locked in a neural bridge. But even the Jaegers are proving nearly defenseless in the face of the relentless Kaiju. On the verge of defeat, the forces defending mankind have no choice but to turn to two unlikely heroes a washed up former pilot (Charlie Hunnam) and an untested trainee (Rinko Kikuchi) who are teamed to drive a legendary but seemingly obsolete Jaeger from the past. Together, they stand as mankind's last hope against the mounting apocalypse</p>
</article>
<article>
<div class="moviewrapper">
<h6>Superman</h6>
<div class="moviecover">
<img src="superman.jpg" alt="superman" width="210" height="260" align="bottom"> <p>At a time when comic book heroes are increasingly distinguished by their flaws, Superman's status as the ultimate good guy has caused him to fall out of favor. (How do you get audiences to relate to a dude who can push the moon out of orbit and has the morals of an Eagle Scout?) Man of Steel, producer Christopher Nolan's attempt to give the hero a Dark Knight retrofit, succeeds in giving the character a fresh start, courtesy of both a gargantuan sense of scale, and Henry Cavill's winningly unironic central performance. Devotees of Christopher Reeve's legendary mild-mannered portrayal may find themselves missing the sequences of quiet time from the previous films (the steadily escalating plot spares little time for cats stuck in trees), but this still manages to uphold the gee-whiz qualities that made people buy the comics in the first place.</p>
</article>
</div>
</section>
</div>
</body>
</html>
