calc() 当前对象的大小
calc() size of the current object
出于某种原因,当我在每一侧使用 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>
如果您要在计算这些边距时对 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;
}
<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>
出于某种原因,当我在每一侧使用 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>
如果您要在计算这些边距时对 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;
}
<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>