Keeping Images Centered using CSS

问题

I'm writing a small web page for a class assignment. I want to keep the text inside a column and in between paragraphs I'm planning on placing images. How do I keep the images inside the column without specifically changing their dimensions?

CSS

body {
        background-image:url("Some Image");
        background-size:cover;
        background-repeat:none;
    }

    .body-box {
                display:block;
                margin-left:33%;
                margin-right:33%;
                padding-left:3%; 
                padding-right:3%;
                border-left:4px solid black;  
                border-right:4px solid black;

                word-wrap:break-word; 
                text-align:justify;
                font-family:'Lato:300',serif; 

                color:black;
                background-color:white; 
            }

HTML

<div class="body-box">  

        <h1>Some Text</h1>

        <a href="Some Image"><img src="Some Link" 
        alt="Something Vague" width="auto" height="auto" align="center"></a>

        <h2>Some Text</h2>
        <p>Some Paragraph</p>

回答1:

You can arrange all image center in your site means,

img{
  display:block;
  margin:0 auto;
}

If you only one ( this ) image means,

.image1 img{
  display:block;
  margin:0 auto;
}

See this fiddle.

If you need re-size means,

fiddle

re-size and fill the div means,

fiddle

回答2:

You can do it by defining css for your images like this

img
{
width:100%;
height:100%
}

By defining this you are telling the image to have its dimension not exceed the height/width of the parent container element

Demo Fiddle

Orignal Image

回答3:

Just give the image a Width and Height of 100% instead of auto

http://jsfiddle.net/XRTba/

回答4:

Something as simple as;

 .body-box img {
     display:block;
     margin:0 auto;
 }

This centers the images. Do you mean something different?

See this Example

来源：https://stackoverflow.com/questions/19532568/keeping-images-centered-using-css

标签

html

css

image

center