- ベストアンサー
インライン要素をレスポンシブで上下中央ぞろえにする
インライン要素をレスポンシブで上下中央ぞろえにするする場合display:tebleを使うしかないでしょうか？ 下記のようにpositionを使う方法ではすべて中央はできても、下記のように改良して左右のみはできないのでしょうか？ .u-centaring-vartical-position-item { position: absolute; top: 0; bottom: 0; margin: auto; }
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
下記と２カ所で示されているものが２つあって各々の意味が矛盾しているので、質問の意図がわかりませんが エスパー回答を行うと、display:block;でいけると思いますよ。 .parent { display:block; position: absolute; top: 50%; left: 50%; margin-right: -50%; -webkit-transform: translate(-50%, -50%); /* Safari用 */ transform: translate(-50%, -50%); } http://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html
関連するQ&A
- inline-blockを上下中央揃えにする方法
以下のhtmlで、内容に合わせてブロックの大きさが変わる状態での 上下の中央揃えができず悩んでいます。 html ------------------------------------------------------------------------------------------ <div id="box1"> <div id="box2"> <div id="box3"> <div>あああああああああああああああああああああああ</div> <div>いいいいいいいいいいいいいいいいいいいいいいい</div> <div>ううううううううううううううううううううううう</div> <div>えええええええええええええええええええええええ</div> <div>おおおおおおおおおおおおおおおおおおおおおおお</div> </div> </div> </div> ------------------------------------------------------------------------------------------ css ------------------------------------------------------------------------------------------ body { text-align:center; } #box1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width:700px; height:400px; background:#666666; } #box2 { position: absolute; left: 0; right: 0; margin: auto; width:500px; height: 300px; background:#FFF; } #box3 { display: inline-block; text-align: left; vertical-align: middle; background:#CCCCCC; } ------------------------------------------------------------------------------------------ #box2に対して#box3の内容が、縦に伸びても短くなっても常に上下が中央に配置されるようにしたいのですが、どうにもうまくいきません。 ブロック内のテキスト自体は左揃えで、ブロックそのものが中央です。 どなたか、ご教授お願い致します。 inline-blockを上下中央揃えにする方法
- 締切済み
- CSS
- iframe要素を中央に寄せたいのですが
https://teratail.com/questions/80344 の様にiframe要素を中央に寄せたいのですが 「margin: auto;で中央寄せしたい場合はiframeにdisplay: block;をかけてあげれば良いです。」 との事ですが iframe { display: block; margin:auto; } margin: 0 auto; にしてもダメでした。 このリンクの通りやれば出来るものなのでしょうか？
- 締切済み
- CSS
- CSSについて 入力フォームの上下揃い
CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？
- 締切済み
- HTML
- 文字列が中央ぞろえにならなかった
自分のサイトの読み込み時間にローディングの画像を表記したのですが、Now Loadingの部分をpタグで囲ったらこの文字列が中央ぞろえにならなかったので、タグなしにしました。 タグなしの文字列は仕事ではNGと聞くのですが、その周りにdivがあれば問題ないのでしょうか？ <!--Loading Image--> <div id="loading_img"> <img src="img/base/loading.gif" width="128" height="15" /> Now Loading </div> /*Loading Image*/ div#loading_img { position: fixed; top: 50%; right: 50%; bottom: 50%; left: 50%; z-index: 9999; width: 128px; margin: -7.5px 0px 0px -64px; text-align: center; color: #02CCFF; } /*Loading Image End*/ pタグで囲って中央ぞろえにする場合は、widthを使ってmargin：０ auto；でできるかと思ったのですが、これではだめなのでしょうか？ またテキストはwidthをいくつにするとピッタリかわからないのですが、どうやっていくつがピッタリかわかるのでしょうか？
- ベストアンサー
- CSS
- margin div 中央寄せ
div内の文字ではなく、div事態をページの中央に寄せたいのですが、 なぜか div.test{ margin-top:100px; margin-bottom:100px; vertical-align: middle; } だと中央寄せにならないし、 div.test{ margin-top:100px; margin-bottom:100px; margin: 0 auto; } だと、 margin-top:100px; margin-bottom:100px; が無視されます。 上下の幅を設定し、更にdivを中央に表示するにはどうすればいいですか？
- ベストアンサー
- CSS
- 中央寄せが出来ません。
下記の様な構成で中央寄せが出来ません。 何がいけないのでしょうか？ アドバイスお願い致します。 index.html <body> <div id="hedderdiv"> <div id="hedder"> </div> <div id="buttomgrp"> </div> </div> </body> CSSファイル #hedderdiv { width: 800px; height: 500px; margin: 0 auto; } #hedder { width: 800px; height: 280px; background-color:#3F3; position:absolute; top: 0px; left: 0px; margin: 0 auto; } #buttomgrp { width: 650px; height: 200px; background-color:#C63; position:absolute; top:200px; left:50px; margin: 0 auto; }
- ベストアンサー
- HTML
- aタグの中にあるimg二つを中央ぞろえにしたい
aタグの中にあるimg二つを中央ぞろえにしたい場合どのように行いますか？ pにtext-align: center;をつけてもダメでした。 インライン要素のなかにインライン要素があり中央ぞろえにする場合どのようにするのでしょうか？ <p class="c-logo-wrap--small"> <a class="u-ta-c" href="http://portfolio-2/index.html"> <img alt="ロゴ" src="img/common-img/icon.png" /> <img class="c-corporate-name" alt="和食通" src="img/common-img/corpolate-name.png" /> </a> https://jsfiddle.net/j84dh5q2/1/ </p> https://jsfiddle.net/j84dh5q2/1/ text-aline:center;はその子孫要素に当たるインライン要素をすべて左右真ん中にするということではないのでしょうか？ それはあっていても親がaなどのインライン要素の場合は使えないのでしょうか？
- ベストアンサー
- CSS
- laravel5で上下中央揃えがずれる
現在、laravel5を使ったウェブサイト作成を勉強しています。 cssを編集してサイトの見栄えを整えているのですが、 laravelのデフォルトのcssを使用してflex box+align-items: centerでの上下中央揃えを行うと、 中央より少し上方にテキスト位置がずれてしまいます。 cssを一から自作した際には正しい表示位置となるので、 元々laravelで用意されているcssに問題があるのではないかと思っています。 一応、p要素やh1~h6要素にmargin-bottomが設定されている部分があることは発見したので、 この部分は0に設定し直したのですが、それでも修正されません。 cssのどこを修正すればよいか教えていただけないでしょうか。 よろしくお願いいたします。
- 締切済み
- CSS
- footerを{position:absolute;bottom:0p
footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。
- 締切済み
- HTML
- Firefoxで見るとli要素レイアウトが崩れます
http://thai-kosiki.net/のサイトです。 フッターメニュー（リンク集～お問い合わせ）の部分がIEやchromeでは思ったように表示されるのですが、FirefoxやiPhoneで見ると、li要素の一番最後の文字（リンク集だと集）が下に落ちてしまいます。 ブラウザーの倍率はどちらも100％でみています。li要素やul要素の文字の大きさを小さく設定してみたり、li要素の間隔を開けてみたり試してみたのですが、うまくいきません。 フッター部分に設定したCSSです。 div#footer { width: 100%; height: 105px; background-repeat: repeat; background-position: left top; background-color: #FFF; border-top-width: thin; border-top-style: solid; border-top-color: #DFDBDC; clear: both; font-size: 75%; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; } div#footer-inner { width: 1000px; height: 105px; text-align: left; position: relative; margin-right: auto; margin-left: auto; } .footer-nav { position: absolute; left: 308px; top: 30px; width: 508px; } .footer-nav li { float: left; list-style-position: inside; list-style-image: url(../img/common/arrow.png); } .copyright { position: absolute; display: inline-block; width: 177px; left: 823px; top: 30px; } absoluteを使っているのが問題なのでしょうか？ FirefoxやiPhoneで見てもレイアウトが崩れないようにするにはどうしたらいいのでしょうか？ 間違っている点や追加した方がいい点などがありましたら教えてください。 どうぞよろしくお願いします。
- ベストアンサー
- CSS
お礼
レスポンシブでインライン要素の上下を中央ぞろえにする方法ということです。 レスポンシブなのでハイトとラインハイトを一緒にする方法は使えませんよね。