Skip to main content

Center Alignment Of Elements | Rustcode

Center-Alignment-Of-Elements-RustcodeWeb

"Center alignment of elements" is the most important concept for every website developer because most of the time this concept is used to align elements. There are many ways to "center align elements" (like flex-box, grid concept, auto margin, and much more) but here we are not discussing all methods.

 In this article, we are using margin concept, text-align concept and position methods to align elements. These concepts are easy to use and useful for general alignment.

You can learn more about website development effects if you follow our other article.



01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Center Alignment Of Elements | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>

  <div class="container">

    <div class="content">
      <h2>Vertical Alignment</h2>
      <h1 style="font-size:50px;">Center Website</h1>
      <p>Center Alignment Of Elements.</p>
    </div>

  </div>

</body>



03. CSS

You can download background image form here.

body, html{
  height: 100%;
  margin: 0px;
  font-family: sans-serif, Helvetica , Arial ;
  overflow: hidden;
  padding: 0px;
}
*{
  box-sizing: border-box;
}
.container{
  background-image: url("bg.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  height: 100%;
}
.content{
  width: 80%;
  background-color: white;
  color: black;
  padding: 24px;
  opacity: .8;
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-weight: bold;
  text-align: center; 
}


04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





RELATED POST:

Comments

Post a Comment