1
У меня есть этот код для моего header.phpотображения изображения на мобильном телефоне не будет центрировать
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(function() {
var pull = $('#pull');
menu = $('nav ul');
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
});
</script>
</head>
<body>
<div class="desktop">
<a href="index.php">
<img border="0" class="logo" src="/images/logo.png" width="15%" height="20%" /></a> <font size="15%"><div class="BDtext">title<br> Description</font></div><br>
</div>
<div class="mobile">
<a href="index.php">
<img border="0" class="mobilogo" src="/images/logo.png" width="15%" height="20%" /></a>
</div>
<nav class="clearfix">
<ul class="clearfix">
<li class="home"><a href="index.php">Home</a></li>
<li class="about"><a href="about.php">About</a></li>
<li class="me"><a href="me.php">About Me</a></li>
<li class="sessions"><a href="sessions.php">Sessions</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</body>
</html>
и этот в моем style.css:
body {
background-color: #ece8e5;
}
.logo{
float: left;
}
.BDtext {
text-align: center;
}
/* Clearfix */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* Menu */
#sub-header ul li:hover,
body.home li.home,
body.Ben li.Ben,
body.about li.about,
body.sessions li.sessions { background-color: #000;} /* Current Page Background Colour */
nav {
height: 40px;
width: 100%;
background: #455868; /* Menu Background Colour */
font-size: 11pt;
font-family: 'PT Sans', Arial, sans-serif;
font-weight: bold;
position: relative;
border-bottom: 2px solid #283744;
}
nav ul {
padding: 0;
margin: 0 auto;
width: 600px;
height: 40px;
}
nav li {
display: inline;
float: left;
}
nav a {
color: #fff;
display: inline-block;
width: 100px;
text-align: center;
text-decoration: none;
line-height: 40px;
text-shadow: 1px 1px 0px #283744;
}
nav li a {
border-right: 1px solid #576979;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
nav li:last-child a {
border-right: 0;
}
nav a:hover, nav a:active {
background-color: #8c99a4; /* Hover Over A Page Background Colour */
}
nav a#pull {
display: none;
}
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
nav {
height: auto;
}
nav ul {
width: 100%;
display: block;
height: auto;
}
nav li {
width: 50%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #576979;
border-right: 1px solid #576979;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
}
}
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
nav {
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #283744;
width: 100%;
position: relative;
}
nav a#pull:after {
content:"";
background: url('nav-icon.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
}
@media only screen and (max-width : 600px) {
.desktop {display:none;}
.mobilogo{
margin-right: 45%;
width:50%;
height: 50%;
}
}
@media only screen and (min-width : 601px) {
.mobile {display:none;}
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
nav li {
display: block;
float: none;
width: 100%;
}
nav li a {
border-bottom: 1px solid #576979;
}
}
/* End Menu */
моя проблема.
мой код .mobilogo в моем CSS не будет центрировать изображение.
Мне нужно, чтобы это изображение появилось в середине страницы, а не для выравнивания влево.
пожалуйста, кто-нибудь поможет мне рассказать, что удерживает его?
это перемещает изображение только в течение не более чем на 1 сантиметр. есть что-то, удерживающее его, но я не вижу, что это такое. –
попытайтесь дать mobilogo конкретную ширину и высоту в пикселях, чтобы увидеть, работает ли она. Возможно, проценты, которые не работают правильно –
, ваше редактирование выше отлично работает. Спасибо большое. –