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

0

Я новичок в html и css, я начал создавать веб-сайт, поэтому начал с правильного размещения логотипа и фона, теперь проблема в том, что я не могу вертикально центрировать свой логотип.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <title>Insert title here</title>
</head>
<body>
    <div class="bg">
        <div class="menu">          
            <div class="logo"></div>
        </div>
    </div>
</body>
</html>

CSS:

body {
    background:url(../img/bg.png) no-repeat center center fixed;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index:1000;
}
body {
    margin:0 ;
    padding:0;
    height: 100%;
    width: 100%;
}

.menu { 
    background:url(../img/MenuBar.png) ;
    height:150px;
    width:1242px;
    position:relative;
}

.logo { 
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    margin:0 auto;  
}
  • 0
    Пара вещей, у вас есть <div class="bg"> , но ваш стиль применяется непосредственно к body , поэтому он вам не нужен. Во-вторых, вам не нужно разделять стили, применяемые к body , все они могут сочетаться. В-третьих, body имеет z-index , который ничего не будет делать, если только у него нет position:relative или position:absolute .
  • 0
    хорошо, я исправлю это, но будет ли это работать потом?
Показать ещё 4 комментария
Теги:
image
centering

3 ответа

0
Лучший ответ

Это должно сделать трюк.

.menu { 
background:url(../img/MenuBar.png) ;
height:150px;
width:1242px;
position:relative;
display: table;

}

.logo{

     background:url(../img/Untitled-1.png) no-repeat center;
     width:262px;
     height:80px;
     margin:0 auto;
     display: table-cell;
     vertical-align: middle;

}

Поделиться
  • 0
    У него уже есть margin:0 auto; , поэтому margin-left и margin-right являются бессмысленными повторениями. Блок display:block должен быть уже установлен по умолчанию с помощью div , но это может повлиять на нечетное правило CSS, поэтому это может сработать.
  • 0
    Я пробовал это, его центрирование по горизонтали, но не по вертикали.
Показать ещё 8 комментариев
0

Что происходит

Учитывая, что вы хотите, чтобы работа была центрирована по вертикали, единственным ответом на данный момент является дать .menu styling vertical-align:middle. Это не сработает. Чтобы центрировать по вертикали, вам нужно использовать трюк position. Вы даете позиции position:absolute, тогда вы говорите ей, что она должна быть top:50%, которая поместит верхнюю часть этого предмета на 50% вниз.

Мы хотим, чтобы центр предмета находился в центре контейнера, но не сверху, чтобы быть в центре. Поэтому мы, наконец, добавляем margin-top отрицательного значения. Это отрицательное значение составляет половину высоты объекта, в этом случае 80px/2 = 40px. Чтобы центрировать по горизонтали, нам нужно будет сделать то же самое. margin:0 auto не будет работать, учитывая, что он позиционируется абсолютно.

Код

В итоге вы измените это:

.logo { 
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    margin:0 auto;  
}

К этому:

.logo {
    background:url(../img/Untitled-1.png) no-repeat center;
    width:262px;
    height:80px;
    position:absolute;
    top:50%;
    margin-top:-40px;
    left:50%;
    margin-left:-131px;
}

Рабочий скрипт

Поделиться
  • 0
    Большой ! но будет ли дисплей одинаковым во всех браузерах и с разным разрешением экрана?
  • 0
    Зависит от того, что вы подразумеваете под тем же. Контейнер .menu является объектом фиксированной ширины. Это означает, что он не отзывчив и не изменится. На небольших экранах вы получите горизонтальные полосы прокрутки. Тем не менее, логотип всегда, независимо от размера экрана, будет центрирован внутри .menu . Вы даже можете, если хотите, изменить .menu на гибкую, и приведенный выше код будет работать.
Показать ещё 3 комментария
0

Создайте содержащий div, используя тот же метод "margin-left: auto; margin-right: auto" или "margin: 0 auto" вы использовали. Как это:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"         "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>Insert title here</title>
<style>
    body{
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover; 
    z-index:1000;
    }
    #container {
    }

    #bg {
        margin: 0 auto;
        width: 25%;
    }

    #menu{ 
    background-color: green;
    height:150px;
    width:600px;
    }

    #logo{
    background-color: blue;
    width:262px;
    height:80px;
    margin:0 auto;
    }
</style>
</head>
<body>
    <div id="container">
    <div id="bg">
        <div id="menu">          
            <div id="logo"></div>
        </div>
    </div>
</div>
</body>
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню