Q&A
ご回答有り難うございます。訂正いたしました。
しかし、問題は解決されませんでした。
##現在の問題点
CSSとHTMLを用いて次のようなページを書きましたが、画像が真ん中に来ないで左に寄ってしまいます。
どこを修正すればよいかご教授ください。
##問題のソース
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <link rel="stylesheet" 7 href="{% static 'css/bootstrap.min.css' %}"> 8 9 10 11 </head> 12 <body> 13 <style> 14 .full-width { 15 width: 100vw; 16 position: relative; 17 left: 50%; 18 right: 50%; 19 margin-left: -50vw; 20 margin-right: -50vw; 21 background-color: red; 22 } 23 24 .top_b1 { 25 width: 1080px; 26 } 27 28 center{ 29 text-align: center; 30 } 31 32 .resizeimage img { width: 100%; } 33 34 </style> 35 <div class="container"> 36 37 <div class="full-width"> <!--親無視--> 38 <div class="top_b1"> <!--画像の親--> 39 <div class="resizeimage"><!--画像サイズ可変--> 40 <div class="center"> 41 <img src="./hogehoge.png" alt="紹介画像1" > 42 43 </div> 44 </div> 45 </div> 46 47 </div> 48 いろいろ 49 </div> 50 </body> 51</html> 52 53 54
回答3件
0
自己解決
自己解決しました。
text-align: center; はインライン要素のみに使用可能であり、
ブロック要素に使用する今回の例ではmargin: 0 auto;を使用すれば良いことがわかりました。
投稿2018/04/08 22:12
総合スコア35
0
セレクタに.が足りない.
css
1 .center{ 2 text-align: center; 3 }
なんか余計なスタイルがいろいろ悪さしているっぽいので, object-fit:contain;を提案. width:100%;と組み合わせると簡単に中央揃えになります.
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
css
1img{ 2 height: 300px; 3 width: 100%; 4 object-fit: contain; 5}
HTML
1<div class="container"> 2 <img src="a.jpg"/> 3いろいろ 4</div>
もちろんこれがベストではないケースもあるため, 色々と試して見る必要はあります.
投稿2018/04/08 14:19
編集2018/04/08 14:40
総合スコア4756
0
確認していませんが提示の中央寄せの方法は何かの誤りでは？
通常left:50%;で左端を中央に持ってきて
margin-left:-25vw;で左端を25vw左に戻すことで
中央寄せをやるものだったかと思うのですが。
投稿2018/04/08 14:22
総合スコア3828
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/08 22:12