Example code for using text-align and margin: 0 auto to center in CSS

Use text-align, margin: 0 auto to center in CSS

When using text-align or margin: 0 auto to center the page, some invalid situations may occur. Here are two examples to explain and solve the problem.

Example 1: Centering an inline element using text-align

Let's say I want to center an image within its parent component. First, the parent component should be a block element (div, p...), and then add the attribute text-align:center in the parent component , and then all the inline elements (span, img...) in this component will be displayed in the center.

Example 2: Centering a block element using margin

The prerequisite for margin: 0 auto is that the element has width. If you want to center a div, you need to set the width for it and then add the margin: 0 auto style.

Experimental results:

Experiment Code

<template>
  <div class="father">
    <div>
      <img src="~@/assets/img/rules-detail-no-record.png">
      <span>I am the inner div content</span>
    </div>
    <span>I am the outer div content</span>
    <div class="bg"></div>
  </div>
</template>

<script>
export default {
  name: "test"
}
</script>

<style scoped>
.father{ //Center the inline elements surrounded by it background: #2e90fc;
  text-align: center;
}
.bg{ //Block element centeredbackground: #fc2e80;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
</style>

Summarize

This is the end of this article about example codes for using text-align and margin: 0 auto to center in CSS. For more relevant content about using text-align and margin: 0 auto to center in CSS, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!