HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

How to Center an Image in CSS Very Easily

in CSS, Responsive design, Web Development
Reading Time: 3 mins read
487 5
0
center image in css
676
SHARES
3.1k
VIEWS
Share on FacebookShare on Twitter

There are few pointers to center an image in CSS.

  • First, make sure that the parent element of the image has its width set.
  • Second, the image should not be wider than its parent element, that’s pretty obvious.

See also:  How To Center A Div Inside A Div Easily

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

Center and Image in CSS horizontally

Images are the same as divs, you can use the text-align into its parent element but not the margin: 0 auto alone on the image.
To center image in div, set a width of the div then add margin:0 auto and display: block into the image in CSS.

The HTML code:

<div class="wrapper"><img src="https://22bulbjungle-153fe.kxcdn.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg" /></div>

 

The CSS styles:

.wrapper{
width: 100%;
height: 300px;
border: 2px solid #93c504;
}
img{
max-width: 250px;
display: block;
margin: 0 auto
}

This will result into an image centered horizontally:

center-image_margin_0_auto

 

See the jsfiddle:

Make sure you have a smaller image width than the parent element.

The margin’s first value 0 was for the top and bottom margin. While the second is for left and right margin.

You can also set margin-left: auto and margin-right: auto on the image in CSS.

Center an Image in CSS horizontally and vertically

We will going to use the span element to guide our image  making it center. Setting an image with margin and text-alignment could not make our image center align.

The HTML code:

<div class="wrapper"><img src="https://22bulbjungle-153fe.kxcdn.com/wp-content/uploads/2017/04/rabbit_in_hand.jpg" /></div>

The CSS styles:

.wrapper {
width: 100%;
height: 300px;
border: 2px solid #93c504;
text-align: center
}

.for-image {
height: 100%;
display: inline-block;
vertical-align: middle
}

img {
max-width: 200px;
height: auto;
background: #3A6F9A;
vertical-align: middle
}

center-image_margin_auto

Responsive design images

Creating a responsive design image is very useful for mobile devices.

Responsive image will automatically scale down and adjust to the width of the device.

To create a responsive design image, you just set a max-width: 100%; and height: auto; into the images.

The max-width: 100%; means the image’s width will cover all its parent’s width. You can also set a natural image width(full resolution width of the image) to the max-width property so it will not be basing upon its parent element’s width.

The height: auto; makes the image height and width proportional. As a result, it would not stretch.

What happens if you will not set a height: auto; is, the image’s original height will still be the same while the width is scaling according to the device’s width, so it will be non-proportional.

Tags: CSSCSS ImageHTMLImagesMarginText-alignTutorial
Share270Tweet169Share68

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.