Question

出于某种原因，当我在每一侧使用margin auto来使元素居中时它不起作用。我假设是因为我使用的是百分比等等。

我尝试使用calc（）更多，但由于我想要居中的元素的内容可能会随着时间而变化，我想尝试让它始终居中。

我使用以下内容执行此操作：margin: 0px calc(50% - 554px / 2) 0px calc(50% - 554px / 2);

元素的当前宽度为554px。因此将它除以2并从50％的父元素中删除它将使它在每一侧需要居中的边距。

问题是，尺寸可能会在将来发生变化，所以如果有意义的话，我想用自动宽度替换554。所以基本上我想要像这样：margin: 0px calc(50% - width / 2) 0px calc(50% - width / 2);当然宽度是当前的元素宽度。我怎么能这样做？

我已经尝试在线查看，抱歉浪费你的时间似乎是一个简单的问题。

div#game {
	margin-top: 50px;
	width: 80%;
	display: inline-block;
	float: left;
}

div#gameselect {
	margin: 0px calc(50% - 554px / 2)  0px calc(50% - 554px / 2);
	display: inline-block;
}

div.gameselect {
	float: left;
	display: inline-block;
	position: relative;
}

p.lefttri {
	width: 0;
	height: 0;
	border-bottom: 30px solid #FF4444;
	border-left: 20px solid transparent;
	float: left;
}

p#test {
	font-family: title;
	font-size: 30px;
	line-height: 24px;
	height: 24px;
	color: white;
	padding: 3px 11px 3px 0px;
	background-color: #FF4444;
	display: inline-block;
	float: left;
}

p.righttri {
	width: 0;
	height: 0;
	border-top: 30px solid #FF4444;
	border-right: 20px solid transparent;
	float: left;
	z-index: 0;
	position: relative;
}

		<div id="gameselect">
			<a href="https://www.google.com"><div class="gameselect">
				<p class="lefttri"></p>
					<p id="test">
					ONE
					</p>
				<p class="righttri"></p>
			</div></a>

			<div class="gameselect gs2">
				<p class="lefttri"></p>
					<p id="test">
					TWO
					</p>
				<p class="righttri"></p>
			</div>

			<div class="gameselect gs3">
				<p class="lefttri"></p>
					<p id="test">
					THREE
					</p>
				<p class="righttri"></p>
			</div>
		</div>

Answer 1

如果您在计算这些边距时要使用硬编码554px，则只需将width: 554px应用于#gameselect，然后您的margin: auto;即可使用。但它不是554px在我身边 - 宽度会根据用户的浏览器而有所不同，正如您所看到的那样，它并不是真正的中心元素。 http://codepen.io/anon/pen/wJpNLK或者谁知道，也许这将集中在你身边。

但是还有很多其他方法可以将这些内容集中在一起。 display: flex; justify-content: center #gameselect上的div#game { margin-top: 50px; width: 80%; display: inline-block; float: left; } div#gameselect { display: flex; justify-content: center; } div.gameselect { float: left; display: inline-block; position: relative; } p.lefttri { width: 0; height: 0; border-bottom: 30px solid #FF4444; border-left: 20px solid transparent; float: left; } p#test { font-family: title; font-size: 30px; line-height: 24px; height: 24px; color: white; padding: 3px 11px 3px 0px; background-color: #FF4444; display: inline-block; float: left; } p.righttri { width: 0; height: 0; border-top: 30px solid #FF4444; border-right: 20px solid transparent; float: left; z-index: 0; position: relative; }无需指定您想要避免的固定宽度。

＆＃13;

<div id="gameselect">
  <a href="https://www.google.com">
    <div class="gameselect">
      <p class="lefttri"></p>
      <p id="test">
        ONE
      </p>
      <p class="righttri"></p>
    </div>
  </a>

  <div class="gameselect gs2">
    <p class="lefttri"></p>
    <p id="test">
      TWO
    </p>
    <p class="righttri"></p>
  </div>

  <div class="gameselect gs3">
    <p class="lefttri"></p>
    <p id="test">
      THREE
    </p>
    <p class="righttri"></p>
  </div>
</div>

＆＃13;

<h2 class="widget-title">Search</h2>
<form role="search" method="get" id="searchform" action="#">
    <input type="text" placeholder="Search..." value="" >
    <button type="submit" id="searchsubmit" value="">
        <i class="fa fa-search"></i>
    </button>
</form>

＆＃13;

calc（）当前对象的大小

1 个答案: