how to center class in css

css center div

<!-- 
	 Simple CSS CENTER DIV Example
 	 
	 * See Fiddle in link for PoC *
-->

<div class="parent">
  <div class="child">
    <p>
      Eh Up Me Duck!
    </p>
  </div>
</div>

<style>
.parent {
  /* Just for aesthetics: see fiddle */
  border: 1px solid black;
  padding: 2px;
}

.child {
  border: 1px solid red;
  width: 50%;
  
  /* This is where the magic happens */
  margin-left: auto;
  margin-right: auto;
  /**********************************/
}

p {
  /* As you do */
  text-align: center;
}
</style>

Posted by: Guest on February-23-2020

Source

.my-div{ width: 80%; margin: 10px auto; /* margin-left and right right has 'auto' value meaning that the browser will automatically calculate the remaining space and give it to the margin. From the example. 20% remained from 80% so that our div will have margin-right: 10% margin-left: 10% and it will be centered. */ }

Code answers related to "how to center class in css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Answers for "how to center class in css"

Code answers related to "how to center class in css"

Code answers related to "CSS"

CSS Answers by Framework

Browse Popular Code Answers by Language

Popular Programming Languages

Advertisements

Company

Compilers

Help

Connect with us