我的网站设计了一个标题，用bootstrap和HTML设计，它是一个粘性标题，图像应该出现在菜单导航上方，我试图让它响应，我得到它减小尺寸但是当页面调整大小时，图像不会居中到页面中间，菜单也会出错。使用CSS并不是很好。
下面是HTML代码
.align-center {
background: transparent;
padding: 10px 0;
}
.align-center a {
color: #70726F;
font-size: 20px;
padding: 10px;
transition: all .5s ease;
}
.align-center a:hover {
color: blue;
text-decoration: none;
}
.menu-header {
position: fixed;
top: 20% !important;
z-index: 100;
left: 100px;
font-weight: bold;
justify-content: center;
margin-top: 15px;
}
.menu-header a:hover {
color: black;
text-decoration: none;
}
.menu-header .active {
color: darkcyan;
}
.center-image {
position: relative;
left: 255px;
margin-bottom: 20px;
}
.cart-image {
right: 30px;
}
#logo_wrapper img {
max-width: 100%;
height: auto;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<head>
<title>Home | Relationinc</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link href="https://relationinc.com.ng/lib/css/theme.css" rel="stylesheet" type="text/css">
<link href="https://relationinc.com.ng/lib/css/bootstrap.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css">
</head>
<body id="home" class="theme">
<header class="header">
<div class="wrapper">
<div id="logo_wrapper">
<a class="center-image align-center image" href="index.html" title="Relationinc">
<img alt="Relationinc" src="https://relationinc.com.ng/new images/logo-text.jpeg">
</a>
</div>
<div class="cart-link cart-image">
<a href="cart.html" title="Cart">
<svg viewBox="0 0 30 30">
<path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z" />
</svg>
<i id="cartcount" class="him-counts hide">0</i>
</a>
</div>
</div>
<div class="align-center menu-header">
<div class="container text-center">
<a href="index.html" class="active">
Home
</a>
<a href="categories.html">
Collections
</a>
<a href="aboutus.html">
About Us
</a>
</div>
</div>
</header>
</body>
答案 0 :(得分：0)
替换您的此代码我希望这对您有所帮助。
.center-image {
position: relative;
left: 0;
margin-bottom: 20px;
display: block;
text-align: center;
}
答案 1 :(得分：0)
首先，你正在使用bootstrap3和bootstrap4 css ......为什么会这样？
具体说明您要使用的引导程序版本..
对您的图片使用img-responsive center-block bootstrap3 类...
或使用d-block mx-auto。
并从标题中删除left:100px ...我已经更改了一些你的CSS。
如果您想使布局响应，请确保不要使用固定的px值..如果需要，可以使用%中的值。
Stack Snippet
.align-center {
background: transparent;
padding: 10px 0;
}
.align-center a {
color: #70726F;
font-size: 20px;
padding: 10px;
transition: all .5s ease;
}
.align-center a:hover {
color: blue;
text-decoration: none;
}
.menu-header {
position: fixed;
top: 20% !important;
z-index: 100;
font-weight: bold;
justify-content: center;
margin-top: 15px;
left: 0;
right: 0;
}
.menu-header a:hover {
color: black;
text-decoration: none;
}
.menu-header .active {
color: darkcyan;
}
.cart-image {
right: 30px;
}
#logo_wrapper img {
max-width: 100%;
height: auto;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<body id="home" class="theme">
<header class="header">
<div class="wrapper">
<div id="logo_wrapper">
<a class="align-center image" href="index.html" title="Relationinc">
<img alt="Relationinc" src="https://relationinc.com.ng/new images/logo-text.jpeg" class="img-responsive center-block">
</a>
</div>
<div class="cart-link cart-image">
<a href="cart.html" title="Cart">
<svg viewBox="0 0 30 30">
<path d="M22.7 8c-.9-3.4-4-6-7.7-6S8.2 4.6 7.3 8H2l3 20h20l3-20h-5.3zM15 4c2.6 0 4.8 1.7 5.6 4H9.3c.9-2.3 3.1-4 5.7-4zm8.3 22H6.7L4.3 10H7v3h2v-3h12v3h2v-3h2.7l-2.4 16z" />
</svg>
<i id="cartcount" class="him-counts hide">0</i>
</a>
</div>
</div>
<div class="align-center menu-header">
<div class="container text-center">
<a href="index.html" class="active">
Home
</a>
<a href="categories.html">
Collections
</a>
<a href="aboutus.html">
About Us
</a>
</div>
</div>
</header>
</body>