イメージは垂直にセンタリングされていません

イメージを縦横に中央に配置しようとしていますが、あまり喜んでいません。また私はそれが敏感であることを必要としています。画像は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私は何か起きているのを見るためにOPsコードをフィドルに追加しました。 https://jsfiddle.net/tst7sz3z/ –

ええ私は彼が何を望んでいるかまだわかりません、フレックスボックスのすべてとあなたの良いことは私の意見です –

に感謝します。

floatとabsoluteの位置を使用すると、rwdサイトを作成する際に問題が発生する可能性があります。

出典

2016-10-10 22:22:24 Texar

#WelcomeBoxの画像を絶対的な中央に配置する場合は、これで再度移動する必要があります。

#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

イメージは垂直にセンタリングされていません

答えて

関連する問題