置きのdivセンター

私はセマンティック-UIを使用して、ページの中央にdiv要素を配置したいのです：置きのdivセンター

それが唯一の真ん中に水平にdiv要素を置くのですが、私は縦にしたいですまた、

コード：

<!doctype html> 
<html class="no-js" lang=""> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
    <title></title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
    <!-- Place favicon.ico in the root directory --> 

    <link rel="stylesheet" href="css/normalize.css"> 
    <link rel="stylesheet" href="css/semantic.min.css"> 
    <link rel="stylesheet" href="css/main.css"> 
    <script src="js/vendor/modernizr-3.3.1.min.js"></script> 

</head> 
<body> 
<!--[if lt IE 8]> 
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade 
    your browser</a> to improve your experience.</p> 
<![endif]--> 

<!-- Add your site or application content here --> 
<div class="ui grid container"> 
    <div class="ui three column centered grid"> 
     <div class="teal column">1</div> 
     <div class="yellow column">2</div> 
    </div> 
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.1.min.js"><\/script>')</script> 
<script src="js/vendor/semantic-2.2.7.min.js"></script> 
<script src="js/plugins.js"></script> 
<script src="js/main.js"></script> 

</body> 
</html>

出典

2017-02-06 zero_coding

の可能性のある重複（http://stackoverflow.com/questions/396145/how-to-vertically - ：またjsfiddleある添付

.ui.grid.container { display: table-row; text-align: center; } .ui.three.column.centered.grid { vertical-align: middle; display: table-cell; text-align: center; } body{ display: table; text-align: center; width: 100%; }

-center-a-div-for-all-browsers） –

どの要素を中央に揃えたいですか？ –

私は色付けされたdivsを中心にしたいですか？ –

はあなたが使用できる12ワイドのdivを中央に：

<div class="ui one column stackable center aligned page grid"> 
    <div class="column twelve wide"> 
     Your stuff here 
    </div> 
</div>

ノート "センター" クラスは、それはdiv要素を中心に説明します。

div内の任意のdivを好きなw/e幅のdivに配置して、異なるサイズに分割することができます。

出典

2017-02-06 09:25:49

divを真ん中に配置しません。 –

フレックスボックスを使用できます。コードの下にあるもの。

html,body { 
    height: 100%; 
} 
.ui.grid.container { 
    display: flex; 
    flex-direction: row; 
    width: 100%; 
    justify-content: center; 
    align-items: center; 
    height: 100%; 
} 
.ui.three { 
     display: flex; 
}

demo

出典

2017-02-06 09:35:28

あなたのコードに以下のCSSを追加し、この1

body { 
 
    height:100%; 
 
} 
 

 
html { 
 
    height: 100%; 
 
} 
 
.ui.grid.container { 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t width: 100%; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
    
 
} 
 
.ui.three { 
 
\t  display: flex; 
 
} 
 
.teal 
 
{ 
 
    background-color:green; 
 
    width:200px; 
 
    padding:10px; 
 
} 
 
.yellow 
 
{ 
 
    background-color:yellow; 
 
    width:200px; 
 
    padding:10px; 
 
}

<!doctype html> 
 
<html class="no-js" lang=""> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 
 
    <title></title> 
 
    <meta name="description" content=""> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 

 
    <link rel="apple-touch-icon" href="apple-touch-icon.png"> 
 
    <!-- Place favicon.ico in the root directory --> 
 

 
    <link rel="stylesheet" href="css/normalize.css"> 
 
    <link rel="stylesheet" href="css/semantic.min.css"> 
 
    <link rel="stylesheet" href="css/main.css"> 
 
    <script src="js/vendor/modernizr-3.3.1.min.js"></script> 
 

 
</head> 
 
<body> 
 
<!--[if lt IE 8]> 
 
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade 
 
    your browser</a> to improve your experience.</p> 
 
<![endif]--> 
 

 
<!-- Add your site or application content here --> 
 
<div class="ui grid container"> 
 
    <div class="ui three column centered grid"> 
 
     <div class="teal column">1</div> 
 
     <div class="yellow column">2</div> 
 
    </div> 
 
</div> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script>window.jQuery || document.write('<script src="js/vendor/jquery-3.1.1.min.js"><\/script>')</script> 
 
<script src="js/vendor/semantic-2.2.7.min.js"></script> 
 
<script src="js/plugins.js"></script> 
 
<script src="js/main.js"></script> 
 

 
</body> 
 
</html>

出典

2017-02-06 09:37:41

少なくとも、クラス名のオーダーを変更できます。コードをコピーして貼り付けるだけです。 –

.parent { 
    position: relative; 
} 
.child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

出典

2017-02-06 09:53:51

あなたのコードが少し説明できますか？ – Sliq

'top：50％;'は50％の上マージンを与えます。しかし、フォームセンターを開始するので、divは中央に配置されません。 divの高さを知っていれば、その高さを上端から差し引くことができます。しかし、高さが不明な場合、 'translateY（）' CSS関数を使用します。要素を垂直方向に移動します。 'transform：translateY（-50％）;'はdivを正確に中央に置きます。 –

を試してみてください。 div要素を垂直方向に中央に表示します。 [？縦にすべてのブラウザのためのdivを中央揃えする方法] https://jsfiddle.net/niteshp27/og6Le59q/2/

出典

2017-02-06 10:05:25 Nitesh

全く動作しません。 –

答えて

関連する問題