Bootstrap Image Align Center : Sometimes we need images to keep in center of page. There are many approaches to to align center an image. Here in this tutorial we are going to explain few of them. We will explain this with example and demo.
Bootstrap Image Align Center Example
You can use the following method to align center the image.
Method 1 : Image align center Using the text-center Class
Using the text-center class you can align center the images. Here is an example –
Bootstrap Image Align Center : Example
<div class="row text-center"> <amp-img src="images/test.jpg" width="600" height="400" class="amp-wp-unknown-size amp-wp-enforced-sizes" sizes="(min-width: 600px) 600px, 100vw"></amp-img> </div> |
If you run the above example it will produce output like this –
Method 2 : Image align center Using the center-block Class
Using the center-block class you can align center the images. Just add this class to image which will make it centered align without any other class.
Bootstrap Image Align Center : Example
<amp-img src="images/test.jpg" class="center-block amp-wp-unknown-size amp-wp-enforced-sizes" width="600" height="400" sizes="(min-width: 600px) 600px, 100vw"></amp-img> |
If you run the above example it will produce output same as the first example.
You can use any of the method to align center the images.