以下のようなプレビューつきのアップロードを作りたいのですが
「ファイルをドロップまたはクリックして選択してください」
を画像の中央に重ねて表示したいです
ただプレビューなので初期状態で画像は存在せず
absolute にしてしまうとこの文字分の領域を確保できず
line-height 分に固定してしまうと幅を縮めて折り返してしまったときにやはりはみ出してしまいます
画像と文字を中央で重ねつつ
両方の大きい方のサイズの領域を確保することはCSSで可能でしょうか
<html lang="ja"> <style> .drop-upload { border:2px dotted #0B85A1; color:#92AAB0; text-align: left; vertical-align: middle; padding:10px; margin: 10px; } .drop-upload input { display: none; } </style> <body> <div class="drop-upload">ファイルをドロップまたはクリックして選択してください <input class="form-control" type="file"> <div class="preview"><img src="http://placehold.jp/150x150.png"></div> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/04/08 07:14