使用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保持圖像居中

回答

相關問題