こんにちは、これらの 3 つの画像をページの中央に配置するのに苦労しています。3 つの画像すべてを 1 つの div (行) 内に囲み、それを別の div (ページ) に含めましたが、これはおそらく不要です。
黄色の div (ページ) を中央に配置しましたが、黄色の div 内で青色の div (行) を中央に配置する方法がわかりません。
これが私のプロジェクトの jsfiddle です: http://jsfiddle.net/edddotcom/7NQKU/11/
またはここにコードがあります:
CSS:
.page {
width:850px;
margin-left: auto;
margin-right: auto;
background-color:yellow;
}
.row {
max-width: 840px;
background-color: blue;
display: inline-block;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.container {
display: block;
float: left;
width: 200px;
height: 116px;
background-color: red;
margin: 5px;
}
span {
margin-top: 10px;
margin-left: 10px;
max-height: 100%;
text-align: justify;
}
img {
width:100%;
max-width: 400px;
min-width: 200px;
}
HTML:
<div class="page">
<div class="row">
<div class="container">
<img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>
</div>
<div class="container">
<img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>
</div>
<div class="container">
<img src="http://cloudsmaker.com/hipsterwall/img/salto-al-norte.jpg"> <span>TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE TEXT HERE </span>
</div>
</div>
</div>
JavaScript:
$(document).ready(function () {
//ON CLICK
$("span").hide();
$("img").toggle(function () { //fired the first time
$(".container").css({
"height": "116px",
"width": "200px"
});
$("span").hide();
$(this).parent().animate({
//FIRSTCLICK COMMAND
height: "400px",
width: "400px"
}, function () {
$(this).children("span").show();
});
//Enlarges container then shows text
}, function () { // fired the second time
$(this).siblings("span").hide(0, '', function () {
$(this).parent(".container").animate({
//SECONDCLICK COMMAND
height: "116px",
width: "200px"
});
});
}); //Hides text then contracts container
});
JavaScript はおそらく必要ありませんが、何が起こっているのかをよりよく理解できるように含めました。