Question

我看了this post，但仍然无法将内部develop：

居中

feature

<div>

它必须与div { margin: 0 auto; border: 5px solid orange; width: 60%; font-family: Verdana; text-align: center; } .game { border: 5px solid black; overflow: hidden; position: absolute; }属性相关，但必须在内部<div> <div class="game" style="width: 100px; height: 100px;"> </div> </div>中插入绝对位置position: absolute;元素。

Answer 1

简单，添加：

.game {
    right: 0;
    left: 0;
    margin: 0 auto;
}

由于宽度为left，right不会影响元素宽度。 margin: 0 auto;将执行定位

实施例

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}

.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

Answer 2

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}

.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

Answer 3

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}

.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 0;
  right:0;
  }

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

添加

  left: 0;
  right:0;

对于游戏类，它将以horziontally为中心。这里的诀窍是将位置设置为左边50％，边距设置为容器宽度的负1的一半。如果能解决这个问题，请告诉我。

编辑：有用的评论告诉我，我们不需要保留左边的边距，我们可以设置左右属性进行水平对齐。这样做更好，因为无论元素的宽度如何，它都能正常工作

Answer 4

这是另一种方法..

.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  font-family: Verdana;
  text-align: center;
}

.game {
  border: 5px solid black;
  overflow: hidden;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

＆＃13;

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

＆＃13;

http://www.codeply.com/go/E0xL0KyOkU

Answer 5

您可以将图像用作课堂游戏的背景

＆＃13;

div {
  margin: 0 auto;
  border: 5px solid orange;
  width: 60%;
  height:300px;
  font-family: Verdana;
  text-align: center;
}

.game {
  border: 5px solid black;
  overflow: hidden;
  position:relative;
  left: 0;
  top:28%;
  right: 0;
  margin: auto;
}

＆＃13;

<div>
  <div class="game" style="width: 100px; height: 100px;">
  </div>
</div>

＆＃13;

Answer 6

试试这个

＆＃13;

configure

＆＃13;

var headline = escape($(this).attr("data-headline"));

//populate the textbox
$(e.currentTarget).find('input[name="headline"]').val(headline);

＆＃13;

水平居中<div>，宽度和高度是绝对的

6 个答案:

实施例