All geek questions in one place

Center the last item or second item

I have 5 divs and I want the last 2 or the last to be centered. Because when I resize the window, I can have 4div at the top and 1 at the bottom or 3 at the top and 2 at the bottom.

Here is a fiddle for a better explanation

.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;
}
<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>
Run codeHide result
+4
source share
2 answers

wrap the buttons in the container with the center of alignment of the text, remove the floating one and display the built-in button-video block

<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/

+1
source

You can use the flexible box method to easily achieve this layout when resizing.

. display: flex justify-content: center .

JSfiddle

.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;
}
<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>
Hide result
0

Source: https://habr.com/ru/post/1609982/

More articles:


All Articles