中小両方のディスプレイにdiv要素を揃えますか?内側のdivが同じ行にあることを望みます。私の現在のコードはそうしています。だから私は、div内のすべてのページを一列に整列させたい。センターは、私は、次の内容を持っている
0
A
答えて
0
含まれているラッパーにtext-align:centerルールを置きます。 は次のようになります。
<div style="text-align:center">
<div style="display:inline-block;vertical-align:top;">
<a href="http://sunlightfoundation.com/" target="_blank"><img src="images/logo.png" style="display: inline"></a>
</div>
<div style="display:inline-block;">
<h4><b>Congress API</b></h4>
</div>
</div>
1
あなたはtext-align: center
を使用して中央にメインの親のdiv(すなわち、.holder
)を揃えることによってそれを行うことができます。 vertical-align: middle
を使用して中央に
および垂直整列子供<div>
の両方(すなわち、.content-holder
と.title-holder
)。
/* Parent Element */
.holder {
text-align: center;
}
/* Child Elements */
.content-holder,
.title-holder {
display: inline-block;
vertical-align: middle;
}
<div class="holder">
<div class="content-holder">
<a href="http://sunlightfoundation.com/" target="_blank">
<img src="http://placehold.it/50x50" style="display: inline">
</a>
</div>
<div class="title-holder">
<h4><b>Congress API</b></h4>
</div>
</div>
・ホープ、このことができます:
は、以下のコードを見てください!
0
div {
text-align:center;
}
a img {
height:50px;
}
<div>
<div style="display:inline-block;vertical-align:top;">
<a href="http://sunlightfoundation.com/" target="_blank"><img src="http://www.freeiconspng.com/uploads/camera-icon--long-shadow-ios7-iconset--pelfusion-30.png" style="display: inline"></a>
</div>
<div style="display:inline-block;">
<h4><b>Congress API</b></h4>
</div>
</div>
あなたはこのCSSスタイルを使用する必要があります。
div {
text-align:center;
}
0
あなたは、ディスプレイを使用して検討するかもしれない:
チェックにこのスニペットを曲げる
.container{
display:flex;
justify-content:center;
}
.imageClass{
display:flex;
align-items:center;
}
<div class="container">
<div class="imageClass">
<a href="http://sunlightfoundation.com/" target="_blank">
<img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" class="image" height="26px" width=26px>
</a>
</div>
<div>
<h4><b>Congress API</b></h4>
</div>
</div>
関連する問題
- 1. 垂直センターは、私は、次のHTMLを持っているCSS
- 2. メッセージ私は、次の内容で.SHファイル持っているUNIX
- 3. は、私は内容のファイルを持っているファイル
- 4. 解析は、私は次の内容のコラムを持ってGRELでJSON(OpenRefine)
- 5. ビルドAPK私はBATファイルの内容を持っているapktool
- 6. は、私は次のテキストを持っている}、{#内
- 7. PostgreSQLのJSON(b)は、私は次の内容のPostgreSQLではjsonbフィールドを持っている
- 8. CSSは、私は次のようにDIVを持つDIV内容
- 9. センターのdivとfitの内容は?
- 10. 正規表現は、私は、次のようなXML文書を持っている内容
- 11. 私はこのようになります目次のためのテーブルを持っている内容
- 12. String.Replace()私は私のC#アプリケーション内の次のコードを持っている変数
- 13. は、私は次のリストを持って、リスト内
- 14. 私は、テキストファイルを持っているし、次の内容です正規表現のC#
- 15. 私はそのような内容のファイルを持っている1024
- 16. 私は以下のような内容のテキストファイルを持っているファイル
- 17. フレックスボックス:センター本体の内容
- 18. 私は次の式を持っているテキストフィールドを持っている
- 19. は/私は、次のjsfiddleを持って
- 20. `Between`クエリは、私は、コレクション内の次のデータを持っているのpython
- 21. のpython - 私は次の内容のテキストファイル持つテキストファイル
- 22. は、内側には、私は次のクエリを持って戻って重複
- 23. NHibernateの内部には、私は次のモデルを持っているクラス
- 24. は、私は、次のエンティティを持っているDBUnitのはCollectionTable
- 25. 私は、次のPHPコードを持っている私のデータベース
- 26. テキストファイルを読むと、私は次の内容のテキストファイル持って予期しない結果に
- 27. 検索値、私はCSVが内容でファイルを持っている価値
- 28. は、私は次のXMLの例を持っているJavaの
- 29. は、私は次のコードを持っているのPython
- 30. は、私は次のコードを持っているjQueryのコールバック
の可能性の重複を役に立てば幸いhttp://stackoverflow.com/questions/40443049/show-div-in - 現在のビューポイント中心のモバイルデバイス) – Mukund