|
Home HTML CSS JAVASCRIPT BOOTSTRAP Python Docker ML tutorial ☰ About us Privacy policy

Horizontal & Vertical Align


CSS Layout - Horizontal & Vertical Align:-


Center Align Elements in css:-

The horizontally center is a block element (like <div>), use margin: auto; in the CSS
Code family


<style>
.code {
  margin: auto;
  width: 60%;
  border: 3px solid red;
  padding: 10px;
}
</style>

<h1>we are code fmaily</h1>

<div class="code">
  <p>Code family</p>
</div>

Center Align Text in css:-

code family

we are apply the Hover on the Images.
text-align:center; using this value

<style>
.code1 {
  text-align: center;
  border: 3px solid red;
}
</style>


<h2>Code family</h2>

<div class="code1">
  <p>Code family</p>
</div>

Center an Image:-

To center an image in HTML page
green-mountains-under-white-clouds-3646213 

<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>

<h2>Code family</h2>
<p>we are code family.</p>

<img  src="https://i.ibb.co/3ykckYn/green-mountains-under-white-clouds-3646213.jpg" alt="green-mountains-under-white-clouds-3646213" border="0" width="250px;">

Left and Right Align:Using position in css-

so we are using position: absolute; for Left and Right Align,

<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid blue;
  padding: 10px;
}
</style>


<h2>Code family</h2>
<p>we are Code family</p>

<div class="right">
  <p>Code family</p>
</div>

Left and Right Align - Using float in css


<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid blue;
  padding: 10px;
}
</style>


<h2>Right Align in code family</h2>
<p>we are code family</p>

<div class="right">
  <p>we are code family</p>
</div>

clearfix in css:-


<style>
div {
  border: 3px solid blue;
  padding: 5px;
}

.img1 {
  float: right;
}

.clearfix {
  overflow: auto;
}

.img2 {
  float: right;
}
</style>


<p>Code family</p>

<div>
  <img class="img1" src="https://i.ibb.co/3ykckYn/green-mountains-under-white-clouds-3646213.jpg" alt="Pineapple" width="170" height="170">
 Code family
</div>

<p style="clear:right">we are code family</p>

<div class="clearfix">
  <img class="img2" src="https://i.ibb.co/3ykckYn/green-mountains-under-white-clouds-3646213.jpg" alt="Pineapple" width="170" height="170">
 we are code family
</div>


More Topics