Question

我试图让图像垂直和水平居中，但没有太大的乐趣。我也需要它做出响应。图像是WelcomeBox div中的图像。附上的图片是背景图片，如果有意义的话可以透过div和公司名称看到。

任何帮助将不胜感激。谢谢

    <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;
}

Answer 1

如果你想在 #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>

Answer 2

如果您想让error: type OrcInputFor‌mat is not member of package org.apache.hadoop.hive.ql.io.orc居中，可以在CSS上使用flexbox。

我不确定，但如果您使用<div>和float位置，您可能会遇到制作rwd网站的麻烦。

Answer 3

您可以使用上一种方法，也可以使用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>

Answer 4

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

<div id="demo">

图像不垂直居中

4 个答案: