center

In this example below you will see how to do a center with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jellynina, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jellynina ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>center</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1 class="text-center">大標題</h1>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
</p>

<p class="text-center">
  <button class="text-center">送出</button>
</p>

<div class="text-center">
  <div class="box margin-center"></div>
</div>


<h1>圖中按鈕</h1>

<div class="box-row">
  <img class="img" src="https://images.unsplash.com/photo-1452827073306-6e6e661baf57?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=674&h=506&q=80" alt="" />
  <div class="hover-to-show">
    <a class="button all-center" href="http://jellynina.me">See more</a>
  </div>
       
</div>

<h1>滑鼠移到圖的時候,放大</h1>
<div class="text-center">
  <img class="img-small hover-largger" src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1122&h=748&q=80" alt="" />
  <img class="img-small hover-largger" src="https://images.unsplash.com/photo-1442551382982-e59a4efb3c86?format=auto&auto=compress&dpr=1&crop=entropy&fit=crop&w=1122&h=748&q=80" alt="" />

</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/jellynina/center-wGbQxa */
body{
  padding: 5px;
  padding-bottom: 50px;
}

.text-center{
  text-align: center;
}

p{
  text-align: justify;
}

/* box setting */

.box{
  width: 200px;
  height: 200px;
  border: 2px solid #000;
}

.box-row{
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
  border: 1px solid #000;
}

.margin-center{
  margin: 15px auto;
}

.box-red{
  background-color: red;
}

/* 上下左右,置中 */
/* 方法一 */
.all-center{
  
  /*  上下左右,置中,父母元件 position: relative; */
/*  這一個IE不適用  */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/* 方法二 */

.all-center-meth02{
  position: absolute;
  
}



.box-row .img{
  position: relative;
  width: 100%;
  z-index: 2;
  
}

.hover-to-show{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  z-index: 3;
  opacity: 0;
  transition: .3s;
}
.hover-to-show:hover{
  opacity: 1;
}


.button{
  z-index: 10;
  text-decoration: none;
  background-color: blue;
  padding: 5px;
  font-size: 24px;
  border-radius: 5px;
  color: #fff;
  width: 250px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  transition: .3s;
}

.button:hover{
  box-shadow: 1px 1px 2px 0px #000;
  background-color: red;
  font-weight: bold;
}

.img-small{
  width: 250px;
}

.hover-largger{
  transition: .3s;
}
.hover-largger:hover{
  transition: .3s;
  transform: scale(1.5,1.5);
}

.bigger{
  width: 300px;
}



Comments