使用CSS保持图像居中

我正在为一个班级作业写一个小型网页。我希望将文本保留在列中以及我正在计划放置图像的段落之间。如何在不改变尺寸的情况下将图像保存在列中？使用CSS保持图像居中

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>

来源

2013-10-23 Lsooties

现在跟你没关系，http://stackoverflow.com/questions/19532568 /保持图像为中心使用css/19532714＃19532714？ – KarSho

在您的网站意味着你可以安排所有图像中心，

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

如果只有一个你（本）图像是指，

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

看到这个fiddle。

如果您需要重新大小的手段，

fiddle

重新大小，并填补了DIV手段，

fiddle

来源

2013-10-23 04:19:00 KarSho

我遇到与示例相同的问题。图像溢出边界，我希望他们重新调整自己的尺寸并留在边界内。 – Lsooties

然后给出图像的固定宽度/高度尺寸或在'％'中给出 – KarSho

帮助，谢谢。 – Lsooties

东西一样简单;

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

这使图像居中。你的意思是不同的？

看到这个Example

来源

2013-10-23 04:10:59

您可以通过定义的CSS为你的形象是这样

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

通过定义这一点，你是在告诉图像有其尺寸不超过高度/宽度做父容器元素

Demo Fiddle

Orignal Image

来源

2013-10-23 04:12:29 Rex

我认为这是可行的，因为图像的宽高比为1：1，我的图像变形了。我希望尽可能保持图像接近原始高宽比，同时仍保留在区域内。 – Lsooties

只要给图像的宽度和高度的100%代替auto

http://jsfiddle.net/XRTba/

来源

2013-10-23 04:16:54

使用CSS保持图像居中

回答

相关问题