<h2><a href="pic.html">Pictures</a></h2> <ol> <li><div class="pic"><img src="start_ files\img1.jpg" high="325" width="500"></div></li> <li><img src="start_ files\img2.jpg" high="250" width="325"></li> <li><img src="start_ files\img3.jpg" high="250" width="325"></li> <li><img src="start_ files\img4.jpg" high="250" width="325"></li> </ol> .pic { opacity: 0.3; border: 3px solid blue; padding: 15px; margin-bottom: 25px; margin-left: 250px margin-right: 250px align: center }

What you need to write or correct, so that the picture stood in the center and the borders were only around the picture, and not an empty space?

  • 2
    html code add - stackanon
  • one
    It is necessary to show html, the available information in the question is not enough - Duck Learns to Hide
  • I can add to the answers below. high = "250" - there is no such property. There is height. Try never to "hard-core" the size of elements in html, at least in css you endure them. - Duck Learns to Hide

2 answers 2

If I understand the problem correctly.

For example, so inline-block:

 .pic { opacity: 0.3; padding: 15px; margin-bottom: 25px; margin-left: 25px; margin-right: 25px; text-align: center; } img { display: inline-block; border: 3px solid blue; } 
 <div class="pic"> <img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" alt=""> </div>

Or so margin:

 .pic { opacity: 0.3; padding: 15px; margin-bottom: 25px; margin-left: auto; margin-right: auto; text-align: center; } img { display: block; margin: 0 auto; border: 3px solid blue; } 
 <div class="pic"> <img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" alt=""> </div>

Here's another way to flex:

 .pic { opacity: 0.3; padding: 15px; margin-bottom: 25px; margin-left: auto; margin-right: auto; display: flex; align-items: center; align-content: center; justify-content: center; } img {border: 3px solid blue;} 
 <div class="pic"> <img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" alt=""> </div>

PS: Specifically for the list:

 .pic { opacity: 0.3; border: 3px solid blue; padding: 15px; margin-bottom: 25px; margin-left: auto; margin-right: auto; display: inline-block; } 
 <ol> <li><div class="pic"><img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" height="325" width="500"></div></li> <li><img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" hight="250" width="325"></li> <li><img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" hight="250" width="325"></li> <li><img src="http://i-di.org/images/yroki/jivotnie/zveri/bears/cartoon_polar_bear_cub_st5.gif" hight="250" width="325"></li> </ol>

....

    Set the desired size not for the image, but for the block in which the image is located. By default, the block width is 100% of the screen width, so you have a frame so big

     .pic { height: 250px; width: 325px; opacity: 0.3; border: 3px solid blue; padding: 15px; } .pic img { height: 100%; width: 100%; } .pic:hover { opacity: 1; } 
     <div class="pic"> <img src="http://wildwildworld.net.ua/sites/default/files/images/belyj-medved3.jpg" alt="" /> </div>

    • one
      Height then why? it must be removed both from the image and from the container; And what margins are fixed? margin: 0 auto with display: inline-block ; align such attribute does not exist at all. - Artem Gorlachev
    • I do not agree with the height, but for the rest did not pay attention, just copied the author’s styles. About margin: 0 auto with display: inline-block author does not need the picture to be in the center of the frame, but rather the frame to be at an equal distance from the picture. At least I understand the question. - Dmitriy Kondratiuk
    • so the margin on the frame for this and should be put (on the container); Do you think that the distortion ratio of the picture is normal? either height or width must be fixed. - Artem Gorlachev
    • No, I do not think that the distortion is normal, but in the question the height and width of the images is fixed, if the author deems it necessary he will change it to fit his needs. On the margin tsitiruya author of the question "that the picture stood in the center and the borders were only around the picture, and not an empty space." If he wrote that he needed to make a picture in the center of the page, then the margin: 0 auto for the container would be set. - Dmitriy Kondratiuk