Блог

Главная - Вопросы по программированию - Изображение не центрируется по вертикали

Изображение не центрируется по вертикали

#html #css

#HTML #css

Вопрос:

Я пытаюсь центрировать изображение по вертикали и горизонтали, но не испытываю особой радости от этого. также мне нужно, чтобы оно было отзывчивым.изображение текста вверху и не центрировано или не реагируетизображение находится в разделе WelcomeBox. Прикрепленное изображение представляет собой изображение фона, которое можно увидеть через divs и название компании впереди, если это имеет смысл.

Любая помощь будет принята с благодарностью. Спасибо 

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

Комментарии:

1. есть ли у вас шанс, что сайт работает? Также, какое изображение я немного смущен

2. Что вы имеете в виду под вертикальным центрированием? Если оно width: 100%; и в нем находится в div, то оно уже настолько центрировано по вертикали, насколько это возможно в его родительском div. @WillDiFruscio Я добавил код OPs в скрипку, чтобы мы могли видеть, что происходит. jsfiddle.net/tst7sz3z

3. да, я все еще не уверен, чего он хочет, flexbox все, и вам хорошо идти, это мое мнение

4. #WelcomeBox имеет фиксированную высоту; Я предполагаю, что OP хочет, чтобы #WelcomeImage был полностью центрирован (по горизонтали и вертикали) внутри него.

5. да, мне нужно, чтобы изображение было центрировано (по горизонтали и вертикали) внутри него, и изображение должно быть отзывчивым, если это возможно, извините, мой вопрос был неясен. Спасибо за вашу помощь.

Ответ №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>

Ответ №2:

Вы можете использовать предыдущий метод, или вы можете использовать flexbox трюк.

Дополнительная информация: Центрирование в CSS: полное руководство

 #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>

Ответ №3:

 #demo {
    background: url(bg_apple_little.gif) no - repeat center center;
    height: 200px;
    width: 200px;
}
  
 <div id="demo">

Ответ №4:

Если вы хотите сделать <div> центрирование, вы можете использовать flexbox в своем CSS.

Я не уверен, но если вы используете float и absolute позиционируете, у вас могут возникнуть проблемы с созданием сайта rwd.