CSS定位問題：當我伸出瀏覽器時，我的圖片位置將發生變化

因此，當我完全縮小瀏覽器尺寸時，我的網站看起來像這樣，這就是我想要的樣子：CSS定位問題：當我伸出瀏覽器時，我的圖片位置將發生變化

http://oi66.tinypic.com/10x7zw4.jpg

但是當我開始伸展瀏覽器時，我的照片在中心的位置將開始改變並一直移動到左側。無論伸出瀏覽器還是縮小圖片，我都希望圖片保持在中心位置。有沒有辦法解決這個問題？一直試圖找出如何解決這個問題，但無法找到任何線索。請幫忙，謝謝。

我的HTML：

<html> 
<head> 
    <title>Jason H Kang</title> 
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
<nav class="navbar navbar-inverse"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
    </div> 
    <div> 
     <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Contact</a></li> 
     </ul> 
    </div> 
    </div> 
</nav> 

    <div id="span"> 
     <h1 class="text-center">Jason H Kang</h1> 

     <div class="intro"> 
      <p class="text-center">23 Years Old | Junior Web Developer | NJ</p> 
     </div> 

     <div class="hello"> 
      <p class="text-center"> 
      Hello I am Jason Kang. Welcome to my personal website!</br>Please feel free to contact me if you have further inquiries.</p> 
     </div> 
    </div> 

    <div class="image"> 
    <img src="kangjason.jpg" alt="face" class="img-circle"> 
    </div> 

    <!-- <div class="button"> 
     <button type="button" class="btn btn-success">Contact Me!</button> 
    </div> --> 

<div id="footer"> 
    <p class="copyright">Copyright: Jason Kang 2015</p> 
</div> 

</body> 
</html>

我的CSS：

body { 
    background-color: #F8F8FF; 
    color: #000000; 
} 


.navbar { 
    background: rgba(114, 180, 39, 1) 
} 

.navbar .brand, .navbar .nav > li > a { 
    color: #FFFFFF; 
    margin-left: 14em; 
    padding-right: 0em; 
    font-family: Gill Sans; 
    font-size: 1.0em; 
} 
.navbar .brand, .navbar .nav > li > a:hover { 
    color: #000000; 
} 

#footer { 
    background:#000000; 
    width:100%; 
    height:47px; 
    position:fixed; 
    bottom:0px; 
    left: 0px; 
} 

.copyright { 
    padding-top: 19px; 
    padding-left: 1.3%; 
    font-family: Arial; 
    font-size: 0.9em; 
    color: white; 
} 

.intro { 
    padding-left: 0.35%; 
    font-family: 'Source Sans Pro', sans-serif; 
    position: relative; 
} 

.hello { 
    padding-top: 1.5%; 
    padding-left: 5%; 
    font-family: 'Source Sans Pro', sans-serif; 
    position: relative; 
} 

.img-circle { 
    width: 11.0em; 
    height: 11.0em; 
    border: 1px solid black; 
    margin-left: 10em; 
    margin-top: 1em; 
    position: relative; 
    }

來源

2015-12-08 jk1045

要居中block級別的元素，你可以使用margin:auto：

.img-circle { 
    width: 11.0em; 
    height: 11.0em; 
    border: 1px solid black; 
    margin: auto; 
    margin-top: 1em; 
    position: relative; 
    display:block; 
    }

JSFiddle Demo
，或者，你可以設置家長text-align:center;：

.image { 
    text-align: center; 
}

JSFiddle Demo

來源

2015-12-08 20:23:09

在Firefox不起作用。 – InsomniacSabbir

@InsomniacSabbir固定，我只是意識到，該類是圖像，而不是div –

改變你的CSS的IMG圈類，如下所示

.img-circle { 
    width: 11.0em; 
    height: 11.0em; 
    margin: 0 auto; 
    border: 1px solid black; 
    display: flex; 
}

來源

2015-12-08 20:28:09 InsomniacSabbir

CSS定位問題：當我伸出瀏覽器時，我的圖片位置將發生變化

回答

相關問題