Question

我使用的是semantic-ui，并希望将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>

Answer 1

要将十二个宽的div居中，您可以使用：

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

请注意＆＃34; 中心＆＃34;等级，它将以div为中心。

你可以在这十二个（或你喜欢的宽度）div中放置任何div来将它分成不同的大小。

Answer 2

您可以使用弹性框。代码以下的东西。

var ele = document.createElement("<option>");  
 $("body").append(ele);   
 $(ele).html(possibleValues[i]);
 $(ele).val(possibleValues[i]);

demo

Answer 3

尝试这个

body { 
    height:100%;
}

html { 
    height: 100%;
}
.ui.grid.container {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	align-items: center;
   
}
.ui.three {
	    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>

Answer 4

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

Answer 5

将以下CSS添加到您的代码中。它将显示垂直居中的div元素。

.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%;
}

还附上了jsfiddle： - https://jsfiddle.net/niteshp27/og6Le59q/2/

放置页面的div中心

5 个答案: