4

垂直方向の整列に関連するいくつかの解決策を試しましたが、これを解決できないようです。誰かがこれについて私を助けることができるかどうかわからない。私が欲しいのは、空の画像の真ん中に代替テキストを配置することです。

これはhtmlコードです：

<div class="viewport">
 <a href="#">
  <img src="http://yahoo.com/" alt="no image" />
 </a>
 <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 </div>
</div>

そしてこれはcssコードです：

.viewport {
 background: #bbb;
 width: 350px;
 height: 300px;
 padding: 5px;
}

.viewport img {
 float: left;
 margin: 5px;
 width: 100px;
 height: 100px;
 background: #000;
 text-align: center;
}

.viewport div {
 margin-left: 20px;
}

お時間を割いていただきありがとうございます。

4

2 に答える 2

6

2017年の編集：Flexbox FTW（おそらくaフレックスアイテム（デフォルトの垂直/ 2番目の軸を持つコンテナーalign-items: stretch）とフレックスコンテナー（垂直方向の位置合わせはとで達成さflex-direction:columnれます）の両方として使用されますjustify-content: whatisneeded）

@altコンテンツの高さは100pxよりはるかに小さいと思います。

線の高さを高さと同じに固定するvetical-alignことで、意図したとおりに動作します。
ここにフィドルがあります：http：//jsfiddle.net/PhilippeVay/Xevph/

于 2012-03-04T11:20:29.740 に答える
4

いいえ、それはできません。ただし、次のような色と表示プロパティを変更できます

img[alt]{
color:red;
 display:none;
}


ここにクールなヒントがあります。最初にファイルが存在するかどうかを確認します。つまり、ロードしている画像が利用可能かどうかを確認し、利用できない場合は、そのDIVにalt属性テキストを含むdivを表示します。

于 2012-03-04T11:19:13.650 に答える