これ何て呼びますか

CSSで画像配置の垂直方向指定

解決済

  • 質問者：m_masaomi
  • 質問日時：
  • 回答数：5件

画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。

縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。


タグはそれぞれしたのようなかんじです。

*****************CSS*****************
#photo {
margin:0 0 0 30px;
padding:0;
background: transparent;
text-align:center;
font-size : 1em;
color:#69788A;
}


.image {
font-size : 0.9em;
margin : 0;
padding : 10px 0 10px 0;
float:center;
width : 800px;
border-bottom:2px solid #CFDEEF;

}

.left-img {
float: left;
width : 50%;
}

.right-img {
float: right;
width : 50%;
}





*****************HTML*****************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>***********</title>
<style type="text/css">
body { background: transparent; }
</style>
</head>
<body id="photo">

<div class="image">
<p class="left-img"><img src="016.jpg" border="0"></p>
<p class="right-img"><img src="017.jpg" border="0"></div>


</body>
</html>



よろしくお願いします。

「CSSで画像配置の垂直方向指定」の質問画像
通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： oilfield
  • 回答日時：

すみません。

最新のブラウザでしか確認していませんでした。
まず判ったことを。
１．2つ目で回答したものではどのブラウザでも期待通りに表示されませんでした。
２．画像とテキストを並べると、InternetExplorer 以外のブラウザでは期待通りに表示されました。
３．１.の場合の html を xhtml で書き直すと、InternetExplorer6, 7 以外のブラウザでは期待通りに表示されました。

どの場合も完璧ではありませんでした。ごめんなさい。

もし面倒でないなら次のような方法があります。
この方法ならInternetExplorer6 以降のブラウザなら期待通りに表示できると思います。

#photo {
margin:0 0 0 30px;
padding:0;
background: transparent;
text-align:center;
font-size : 1em;
color:#69788A;
}
.image {
width: 800px;
}
.left-img {
float: left;
width: 400px;
height: 350px;
text-align: center;
overflow: hidden;
}
.caption,
.left-img img {
position: relative;
top: 50%;
}

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>***********</title>

</head>
<body id="photo">
<div class="image">

<p class="left-img">
<img src="image1.jpg" style="margin-top: -**px;"><br>
<span class="caption">aaa</span>
</p>
<p class="left-img">
<img src="image2.jpg" style="margin-top: -**px;"><br>
<span class="caption">bbb</span>
</p>
<p class="left-img">
<img src="image3.jpg" style="margin-top: -**px;"><br>
<span class="caption">ccc</span>
</p>
<p class="left-img">
<img src="image4.jpg" style="margin-top: -**px;"><br>
<span class="caption">ddd</span>
</p>
</div>
</body>
</html>

** には画像の高さの半分の値を入れます。
画像の高さは、画像アイコンにマウスカーソルを重ねるか、画像のプロパティの概要を詳細表示にすると確認できます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

色々教えていただきありがとうございました。
無精者なので手っ取り早い方の背景に、という案を使わせていただく事にしました。

通報する
お礼日時：2009/11/04 02:03

No.4

  • 回答者： syagain
  • 回答日時：

邪道ですが、<p>に背景画像の設定をしてはいかがでしょうか。


background-position:center;なら、簡単に中央に画像を持って来れます。
fixed,no-repeatなどだけCSSで指定し、
画像のURLだけ逐一、HTMLで<p style="background-image:url(001.jpg);">とすれば、ご希望の通りのデザインにはなると思います。
（ただテキストの配置はまた工夫が必要になりますが）
(CSS)
#photo {
margin:0px 0 0 30px;
padding:0;
background: transparent;
text-align:center;
font-size : 1em;
color:#69788A;
}

.image{
width: 800px;
}

.left-img{
background-position:center;
background-repeat:no-repeat;
width: 400px;
height: 350px;
float:left;
}

(HTML)
<body id="photo">
<div class="image">
<p class="left-img" style="background-image:url(001.jpg);"></p>
<p class="left-img" style="background-image:url(002.jpg);"></p>
</div>

<div class="image">
<p class="left-img" style="background-image:url(002.jpg);"></p>
<p class="left-img" style="background-image:url(001.jpg);"></p>
</div>

</body>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

出来るだけ正当な手段で作りたかったのですが、正当に手っ取り早く、というのは無理なようなので、背景にしてしまうという案を使わせていただく事にしました。

テキストの配置は下のような感じで対処してみました。

#photo .txt1{
font-size : 0.9em;
padding : 0;
margin: 0 auto;
width : 800px;
border-bottom:1px solid #ffffff;
}

#photo .txt2{
font-size : 1em;
padding:0 0 0 30px;
margin:0;
text-align: left;
color:#69788A;
float:left;
width:400px;
}

#photo .txt3{
font-size : 1em;
padding:0 0 0 30px;
margin:0;
text-align: left;
color:#69788A;
float:right;
width: 400px;
}

通報する
お礼日時：2009/11/04 01:57

No.3

  • 回答者： k0021
  • 回答日時：

<p class="right-img"><img src="017.jpg" border="0"></div>を


<p class="left-img"><img src="017.jpg" border="0"></div>に変更したら
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： oilfield
  • 回答日時：

<div class="image">


<p class="left-img"><img src="016.jpg" border="0"></p>
<p class="left-img"><img src="017.jpg" border="0"></p>
</div>


.image {
width: 800px;
}
.left-img {
float: left;
width: 400px;
height: ***px;
line-height: ***px;
text-align: center;
overflow: hidden;
}
.left-img img {
vertical-align: middle;
}

上記の説明を少し。
画像の入っているボックスの幅が400pxということなのでp要素は width: 400px; ですね。
次に画像を中央に揃えるために text-align: center; とします。

次に縦に並んでいるp要素を横に並べるために float: left; とします。
p要素の高さ（img要素の高さ）が違うと段々になって、うまく並ばないと思うので、p要素に画像のおおよその高さを height: ***px; と指定します。（もし画像がp要素より大きくなったときのために、p要素には overflow を指定して溢れ出したときの動作を指定しています。）
div要素の幅が 800px なので、p要素が一行に二つずつ並ぶはずです。

次に画像を行の垂直中央に揃えるためにimg要素に vertical-align: middle; とします。
このままでは画像は上に揃ったままなので p要素内の行の高さを指定します。（p要素の高さと行の高さは違うようです。）
行の高さは line-height: ***px; と指定します。このときの値は p要素の高さと同じにします。

これで line-height の垂直中央に 画像が揃ったと思います。

補足です。
画像の溢れ出しに対処するために overflow を使用していますが、画像の溢れ出した部分は隠れてしまいます。
なので大きな画像を使う場合、img要素に width属性か height属性のどちらか片方を指定することをお勧めします。（片方だけ指定するのは画像の縦横比を保つのが楽なためです）
    • good
    • 0
    • 件
通報する
この回答へのお礼

教えていただいたとおりにやってみましたが、垂直中央にそろいませんでした。
他の部分が影響しているのかと思い、余分なところはすべて削除したのですが…

タグは以下の通りです。


#photo {
margin:0 0 0 30px;
padding:0;
background: transparent;
text-align:center;
font-size : 1em;
color:#69788A;
}
.image {
width: 800px;
}
.left-img {
float: left;
width: 400px;
height: 350px;
line-height: 350px;
text-align: center;
overflow: hidden;
}
.left-img img {
vertical-align: middle;
}



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE">
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" href="style.css" type="text/css">
<title>***********</title>

</head>
<body id="photo">
<div class="image">
<p class="left-img"><img src="001.jpg" border="0"></p>
<p class="left-img"><img src="002.jpg" border="0"></p>
</div>

<div class="image">
<p class="left-img"><img src="002.jpg" border="0"></p>
<p class="left-img"><img src="001.jpg" border="0"></p>
</div>
</body>
</html>

通報する
お礼日時：2009/11/02 01:56

No.1

  • 回答者： oilfield
  • 回答日時：

できるだけ変更箇所が少なくなるように説明します。



まず、
<p class="left-img"><img src="016.jpg" border="0"><img src="017.jpg" border="0"></p></div>
こうして、
.left-img img { vertical-align: middle;}
こうですね。

このとき img 要素を改行しないでください。余計な空白が入ります。
<img …>
<img …>
とせずに、
<img …><img …>
とします。

画像の横に余白を空けたければ css の margin プロパティを使います。
.left-img img {
margin-right: 5em;
margin-right: 5em;
}

次の css は不要です。
.left-img {
float: left;
width : 50%;
}

.right-img {
float: right;
width : 50%;
}

質問に直接関係ありませんが、float: center; という記述は間違いです。
中央に揃えたければ、margin: 0 auto; とします。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。
ただ、これだと縦の画像が並んだときにずれてしまいました。
捨てサイトですが、URLを乗せますので、ご覧ください。
横に二つならんだ幅400pxのボックスそれぞれの中心に画像を配置させたいのです。

http://site.siromuku.com/index.html

通報する
お礼日時：2009/11/01 20:04

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報