Question

我有5个div，我希望最后2个或最后一个居中。因为当我调整窗口大小时，我可以在顶部有4div，在底部有1个，顶部有3个，底部有2个。

以下是fiddle以获得更好的解释

public void letTheMachinesFly(List<FlyingMachine> flyingMachines) {
        for (FlyingMachine flyingMachine : flyingMachines) {
            flyingMachine.fly();
        }
    }
}

.button-video{
	width:220px;
	height:50px;
	background-color: #234CA5;
	position:relative;
	float:left;
	margin:5px 10px;
}
.button-video a{
	position:absolute;
	bottom:0;
	top:0;
	left:0;
	right:0;
}
.button-video span{
	font-size:14px;
	color:white;
    padding-left:25%;
	line-height: 50px;
}

.play{
	position:absolute;
    background-color:white;
    border-radius:10px;
    top:10px;
    left:5px;
    width:40px;
    height:30px;
}
.triangle{
	margin-top:5px;
    margin-left:15px;
    width: 0;
    height: 0;
    border-left: 16px solid #234CA5;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.triangle:hover{
	cursor:pointer;
}
.button-video:hover .triangle{
    border-left: 16px solid #D3222A;
}

Answer 1

使用文本对齐中心包装容器内的按钮，移除浮动并显示内联块按钮 - 视频

<div class="container">
    <div class="button-video">
        <a href="../docs/interactif_2005/TRIXELL2005.mpg"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>Présentation TRIXELL 05</span>
    </div>
    <div class="button-video">
        <a href="../../4_1_technical_product_manager/documents/P4600-P4700-P4800.avi"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>P4600 - P4700 - P4800</span>
    </div>
    <div class="button-video">
        <a href="../../4_1_technical_product_manager/documents/P3543pR-P4343RF.avi"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>P3543pR - P4343RF</span>
    </div>
    <div class="button-video">
        <a href="../docs/liens/4600%20Flash.lnk"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>Animation PIXIUM 4600</span>
    </div>
    <div class="button-video">
        <a href="../docs/liens/4700%204800%20Flash.lnk"></a>
        <div class="play">
            <div class="triangle"></div>
        </div>
        <span>Animation 4700 - 4800</span>
    </div>
</div>

<style>
.container{
    text-align: center;
}

.button-video{
    width:220px;
    height:50px;
    background-color: #234CA5;
    position:relative;
    display: inline-block;
    margin:5px 10px;
}
.button-video a{
    position:absolute;
    bottom:0;
    top:0;
    left:0;
    right:0;
}
.button-video span{
    font-size:14px;
    color:white;
    padding-left:25%;
    line-height: 50px;
}

.play{
    position:absolute;
    background-color:white;
    border-radius:10px;
    top:10px;
    left:5px;
    width:40px;
    height:30px;
}
.triangle{
    margin-top:5px;
    margin-left:15px;
    width: 0;
    height: 0;
    border-left: 16px solid #234CA5;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.triangle:hover{
    cursor:pointer;
}
.button-video:hover .triangle{
    border-left: 16px solid #D3222A;
}
</style>

http://jsfiddle.net/nk398pcp/1/

Answer 2

您可以使用灵活的方法在调整大小时轻松实现该布局。

将容器内的所有元素包裹起来。 display: flex和justify-content: center会将最后一个或两个项目放在中心位置。

Updated JSfiddle

＆＃13;

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.button-video {
  width: 220px;
  height: 50px;
  background-color: #234CA5;
  position: relative;
  float: left;
  margin: 5px 10px;
}
.button-video a {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}
.button-video span {
  font-size: 14px;
  color: white;
  padding-left: 25%;
  line-height: 50px;
}
.play {
  position: absolute;
  background-color: white;
  border-radius: 10px;
  top: 10px;
  left: 5px;
  width: 40px;
  height: 30px;
}
.triangle {
  margin-top: 5px;
  margin-left: 15px;
  width: 0;
  height: 0;
  border-left: 16px solid #234CA5;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.triangle:hover {
  cursor: pointer;
}
.button-video:hover .triangle {
  border-left: 16px solid #D3222A;
}

＆＃13;

<div class="container">
  <div class="button-video">
    <a href="../docs/interactif_2005/TRIXELL2005.mpg"></a>
    <div class="play">
      <div class="triangle"></div>
    </div>
    <span>Présentation TRIXELL 05</span>
  </div>
  <div class="button-video">
    <a href="../../4_1_technical_product_manager/documents/P4600-P4700-P4800.avi"></a>
    <div class="play">
      <div class="triangle"></div>
    </div>
    <span>P4600 - P4700 - P4800</span>
  </div>
  <div class="button-video">
    <a href="../../4_1_technical_product_manager/documents/P3543pR-P4343RF.avi"></a>
    <div class="play">
      <div class="triangle"></div>
    </div>
    <span>P3543pR - P4343RF</span>
  </div>
  <div class="button-video">
    <a href="../docs/liens/4600%20Flash.lnk"></a>
    <div class="play">
      <div class="triangle"></div>
    </div>
    <span>Animation PIXIUM 4600</span>
  </div>
  <div class="button-video">
    <a href="../docs/liens/4700%204800%20Flash.lnk"></a>
    <div class="play">
      <div class="triangle"></div>
    </div>
    <span>Animation 4700 - 4800</span>
  </div>
</div>

＆＃13;

居中最后一个元素或最后一个元素

2 个答案: