圖像不垂直居中

我試圖讓圖像垂直和水平居中，但沒有太多的喜悅。我也需要它做出反應。該圖像是WelcomeBox div中的圖像。附上的圖片是背景圖片，如果有意義的話，可以通過div和公司名稱在前面看到。圖像不垂直居中

任何幫助將不勝感激。如果你想<div>中心可能會在你的CSS使用flexbox謝謝

<div id="Header"><!--Start of Header--> 

     <div><img id="Logo"src="images/logo.png"></div> 

     <div id="NavBar"> 
      <ul> 
       <li><a href="#">Item 6</a></li> 
       <li><a href="#">Item 5</a> 
        <ul> 
         <li><a href="http://sermon.net/">Sub</a></li> 
         <li><a href="#">Sub</a></li> 
         <li><a href="#">Sub</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Item 4</a> 
        <ul> 
         <li><a href="#">Sub</a></li> 
         <li><a href="#">Sub</a></li> 
         <li><a href="#">Sub</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Item 3</a></li> 
       <li><a href="#">Item 2</a></li> 
       <li><a href="#">Item 1</a></li> 
      </ul> 
     </div><!--End of NavBar--> 

    </div><!--End of Header--> 

     <div class="firstsection"> 

      <p> 
       First Words<br><br> 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
       firstsection firstsection firstsection firstsection firstsection firstsection firstsection firstsection 
      </p> 

     </div> 

     <div id="WelcomeBox"> 

      <div><center><img id="WelcomeImage" src="images/welcome logo.png"></center></div> 
     </div> 

     <div class="secondsection"> 

      <p> 
       First Words<br><br> 
       *secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
       secondsection secondsection secondsection secondsection secondsection secondsection secondsection 
      </p> 

     </div> 






    </div><!--End of MainContainer--> 




body{ 
      width:100%; 
      height:100%; 
      background:url(images/glasgow.jpg); 
      background-position: center center; 
      background-repeat: no-repeat; 
      background-attachment: fixed; 
      background-size: cover; 
      background-color: #999; 

} 

*{ 
    padding:0px; 
    margin:0px; 
} 

#MainContainer{ 
width:100%; 
height:auto;  
} 

#Header{ 
    width:100%; 
    height:auto; 
    position:fixed; 
    border:px red solid; 
    position: fixed; 
    right: 0; 
    top: 0; 
    left:0; 


} 

/*Top Logo*/ 
#Logo 
{ 
    width:115px; 
    height:auto; 
    float:left; 
    margin:15px; 
    cursor:pointer; 
    position: fixed; 
    z-index:1; 
} 

/*Navigation ul*/ 
#NavBar ul{ 
    width:100%; 
    background:#0f1b43; 
    line-height:100px; 
    position:fixed; 
    border-bottom: 2px yellow solid; 
} 

/*Navigation li*/ 
#NavBar ul li{ 
    list-style-type: none; 
    float: right; 
    position:relative; 
    border-right: px silver solid; 

} 

#NavBar ul li:last-child{border-left:0px silver solid;} 
    #NavBar ul li:first-child{border-right:0px silver solid;} 

#NavBar ul:after{content:"";display:block;clear:both} 

/*Navigation a*/ 
#NavBar ul li a{ 
    color:white; 
    text-decoration: none; 
    padding:20px; 

} 

/*Navigation li HOVER*/ 
#NavBar ul li:hover{ 
    background:#8269e0; 
    transition:all 0.80s; 
} 


/*hide submenu*/ 
#NavBar ul li ul { 
    display: none; 
} 

/*Show submenu at hover*/ 
#NavBar ul li:hover ul { 
    display:block; 
    position:absolute; 
    top:100px; 


} 

/*Make submenu vertical */ 
#NavBar ul li ul li{ 
    display: block; 
    float:none; 
    line-height:50px; 

} 


.firstsection{ 
    width:100%; 
    min-height:400px; 
    margin-top:100px; 
    background-color:white; 
    color: Black; 
} 

.secondsection{ 
    width:100%; 
    min-height:auto; 
    background-color:white; 
    color: Black; 
} 

.firstsection p { 
    width:80%; 
    margin: auto; 
    display:block; 
} 

.secondsection p 
{ 
    width:80%; 
    margin: auto; 
    display:block; 
} 


#WelcomeBox{ 
    width:100%; 
    height:300px; 
} 


#ImageBoxbox{ 
    width:100%; 
    line-height:300px; 
} 

#WelcomeImage{ 

    color:yellow; 
    font-size:3em; 
}

來源

2016-10-10 user2916941

你的網站住任何機會？另外哪個圖像我有點困惑 –

你是什麼意思垂直居中？如果它是'width：100％;'並且它在div上，那麼它已經是垂直居中的，因爲它可以在它的父div中。 @WillDiFruscio我將OP代碼添加到小提琴中，以便我們可以看到發生了什麼。 https://jsfiddle.net/tst7sz3z/ –

是啊我仍然不確定他想要什麼，flexbox的一切和你的好去是我的意見 –

。

我不確定，但如果您使用float和absolute位置，則可能在製作rwd站點時遇到麻煩。

來源

2016-10-10 22:22:24 Texar

如果你正在尋找絕對中心的圖像在＃歡迎盒然後這應該讓你再次移動。

#WelcomeBox { 
 
    width: 100%; 
 
    height: 300px; 
 
    position: relative; 
 
    border: solid 1px; 
 
    background-color: aliceblue; 
 
} 
 

 
#WelcomeImage { 
 
    max-width: 100%; 
 
    max-height: 200px; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<div id="WelcomeBox"> 
 
    <img id="WelcomeImage" src="http://placekitten.com/g/200/200" /> 
 
</div>

來源

2016-10-10 22:34:31 JonSG

您可以使用以前的方法，也可以使用flexbox伎倆。

更多信息：Centering in CSS: A Complete Guide

#WelcomeBox { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 300px; 
 
    position: relative; 
 
    border: solid 1px; 
 
    background-color: aliceblue; 
 
} 
 

 
#WelcomeImage { 
 
    max-width: 100%; 
 
    max-height: 200px; 
 
}

<div id="WelcomeBox"> 
 
    <img id="WelcomeImage" src="http://placekitten.com/g/200/200" /> 
 
</div>

來源

2016-10-11 03:27:33 Cid

#demo { 
    background: url(bg_apple_little.gif) no - repeat center center; 
    height: 200px; 
    width: 200px; 
}

<div id="demo">

來源

2016-10-11 03:33:29

圖像不垂直居中

回答

相關問題