HTML-中心图像在页面上，并且div左侧浮动，没有更改徽标的页面中心

时间：2016-11-11 15:59:22

标签： html css

我正在尝试做某些事情，我已经搜索了论坛并且已经浏览了网络4个多小时。我也做了很多试验和错误，有许多不同的方法来做，但他们并没有像我想做的那样。我删除了所有试验和错误，并将代码保留为最小。

我希望徽标位于页面中心，而不是在应用左侧浮动后留下的区域中心。

以下是该网站的现场演示： http://rissew.com/

这是我想要做的： WireFrame - What i want to look like

也许浮动不是正确的方法。这就是为什么我转向这里的人。

@charset "UTF-8";  


html {
    font-family: sans-serif;
}

body {
    margin: 0
}

a {
    color: #B90000;
    text-decoration: none;
}
a:focus,
a:hover {
    color: #15c;
    outline: 0
}
a:hover {
    color: #15c
}

*,
:after,
:before {
    box-sizing: border-box
}

body {
    font-family: "Titillium Web Regular", Helvetica, Arial, sans-serif;
    line-height: 1.42857143;
    color: #4d4d4d;
    background-color: #f1f1f1;
    overflow-x: hidden
}

.header {
    background: #fff;
    position: relative;
    box-shadow: 0 10px 10px -6px rgba(0, 0, 0, .1)
}

.header .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

.nav {
    background-color: #fff;
    border-top: 2px solid #f6f6f6;
    position: relative;
    z-index: 2
}

.nav:after,
.nav:before {
    content: "";
    display: table
}

.nav:after {
    clear: both
}

.navlist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center
}

@media screen and (min-width:767px) {
    .page-nav__list {
        width: 767px
    }
}

@media screen and (min-width:989px) {
    .navlist {
        width: 989px
    }
}
@media screen and (min-width:1199px) {
    .navlist {
        width: 1200px
    }
}

.page-nav__item {
    margin: 0;
    padding: 0 5px;
    display: block;
    width: 16.666666667%;
    line-height: 1;
    float: left
}

.navlink {
    font-size: .75rem;
    font-family: "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #666;
    padding: 10px 0;
    display: block;
    border-bottom: 3px solid #ccc
}

.navlink:focus,
.navlink:hover {
    color: #B90000;
    border-color: #B90000
}

.navlink.active {
    color: #B90000;
    border-bottom: 3px solid #B90000
}

.sociallink{
    display: block;
}

.sociallist {
    list-style: none;
    padding: 0;
    max-width: 1450px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
}

.sociallist li {
    margin: 0;
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block
}

.youtube{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/youtube.png');
    background-size: contain;
    text-indent:-9999px;
}

.youtube:hover {
     background-image: url('http://www.rissew.com/assets/images/youtubehover.png');
}

.facebook{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/facebook.png');
    background-size: contain;
    text-indent:-9999px;
}

.facebook:hover {
     background-image: url('http://www.rissew.com/assets/images/facebookhover.png');
}

.twitch{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/twitch.png');
    background-size: contain;
    text-indent:-9999px;
}

.twitch:hover {
     background-image: url('http://www.rissew.com/assets/images/twitchhover.png');
}

.twitter{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/twitter.png');
    background-size: contain;
    text-indent:-9999px;
}

.twitter:hover {
     background-image: url('http://www.rissew.com/assets/images/twitterhover.png');
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
        <title>Rissew Gaming - Where the Frag Happens</title>
        <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
        <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
	</head>
    <body>
  <header id="header" class="header">
            <ul class="sociallist">
              <li class="youtube"><a href="https://www.youtube.com/channel/UCyNi8D-XcpZnZAQVlzQj2RQ" class="sociallink">youtube</a></li>
              <li class="facebook"><a href="http://www.facebook.com/RissewGaming" class="sociallink">facebook</a></li>
              <li class="twitter"><a href="http://www.twitter.com/RissewGaming" class="sociallink">twitter</a></li>
              <li class="twitch"><a href="http://www.twitch.tv/Rissew" class="sociallink">twitch</a></li>
            </ul>        
            <img class ="headerbig" source="assets/images/headerbig.png"alt="Rissew Gaming">
          <nav class="nav">
            <ul class="navlist">
              <li class="page-nav__item"><a href="index.html" title="" class="navlink active">Home</a></li>
              <li class="page-nav__item"><a href="about.html" title="" class="navlink">About</a></li>
              <li class="page-nav__item"><a href="guides.html" title="" class="navlink">Guides</a></li>
              <li class="page-nav__item"><a href="forum.html" title="" class="navlink">Forum</a></li>
              <li class="page-nav__item"><a href="shop.html" title="" class="navlink">Shop</a></li>
              <li class="page-nav__item"><a href="watch.html" title="" class="navlink">Watch</a></li>
            </ul>
          </nav>
  </header>
        
        <main>
        </main>
        <footer>
            <p>
            </p>
        </footer>
    </body>

2 个答案:

答案 0 :(得分：2)

可能这就是你所希望的。

将float:left添加到.sociallist 

.sociallist{
    float: left;
}

和样式.headerbig为

.headerbig {
    display: block;
    max-width: 120px;
    float: none;
    margin-right: auto;
    margin-left: auto;
}

答案 1 :(得分：0)

我建议将.sociallist更改为position: absolute; left: 0;，使其无论其他元素如何都会粘在左侧。然后，您可以在.headerbig上放置一个宽度，并将其设置为margin: 0 auto;，使其居中。

.headerbig {
    display: block;
    width: 120px; /* YOUR IMAGE WIDTH HERE */
    margin: 0 auto;
}

.sociallist {
    position: absolute;
    left: 0;
}


@charset "UTF-8";  


html {
    font-family: sans-serif;
}

body {
    margin: 0
}

a {
    color: #B90000;
    text-decoration: none;
}
a:focus,
a:hover {
    color: #15c;
    outline: 0
}
a:hover {
    color: #15c
}

*,
:after,
:before {
    box-sizing: border-box
}

body {
    font-family: "Titillium Web Regular", Helvetica, Arial, sans-serif;
    line-height: 1.42857143;
    color: #4d4d4d;
    background-color: #f1f1f1;
    overflow-x: hidden
}

.header {
    background: #fff;
    position: relative;
    box-shadow: 0 10px 10px -6px rgba(0, 0, 0, .1)
}

.header .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

.headerbig {
    display: block;
    width: 120px;
    margin: 0 auto;
}

.nav {
    background-color: #fff;
    border-top: 2px solid #f6f6f6;
    position: relative;
    z-index: 2
}

.nav:after,
.nav:before {
    content: "";
    display: table
}

.nav:after {
    clear: both
}

.navlist {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    text-align: center
}

@media screen and (min-width:767px) {
    .page-nav__list {
        width: 767px
    }
}

@media screen and (min-width:989px) {
    .navlist {
        width: 989px
    }
}
@media screen and (min-width:1199px) {
    .navlist {
        width: 1200px
    }
}

.page-nav__item {
    margin: 0;
    padding: 0 5px;
    display: block;
    width: 16.666666667%;
    line-height: 1;
    float: left
}

.navlink {
    font-size: .75rem;
    font-family: "Titillium Web Semibold", "Open Sans Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #666;
    padding: 10px 0;
    display: block;
    border-bottom: 3px solid #ccc
}

.navlink:focus,
.navlink:hover {
    color: #B90000;
    border-color: #B90000
}

.navlink.active {
    color: #B90000;
    border-bottom: 3px solid #B90000
}

.sociallink{
    display: block;
}

.sociallist {
    list-style: none;
    padding: 0;
    max-width: 1450px;
    margin-top: 0;
    margin-right: auto;
    margin-left: auto;
    position: absolute;
    left: 0;
}

.sociallist li {
    margin: 0;
    padding: 0;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block
}

.youtube{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/youtube.png');
    background-size: contain;
    text-indent:-9999px;
}

.youtube:hover {
     background-image: url('http://www.rissew.com/assets/images/youtubehover.png');
}

.facebook{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/facebook.png');
    background-size: contain;
    text-indent:-9999px;
}

.facebook:hover {
     background-image: url('http://www.rissew.com/assets/images/facebookhover.png');
}

.twitch{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/twitch.png');
    background-size: contain;
    text-indent:-9999px;
}

.twitch:hover {
     background-image: url('http://www.rissew.com/assets/images/twitchhover.png');
}

.twitter{
    display: block;
    height: 26px;
    width: 26px;
    background-image: url('http://www.rissew.com/assets/images/twitter.png');
    background-size: contain;
    text-indent:-9999px;
}

.twitter:hover {
     background-image: url('http://www.rissew.com/assets/images/twitterhover.png');
}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
        <title>Rissew Gaming - Where the Frag Happens</title>
        <link rel="stylesheet" type="text/css" href="assets/css/style.css" />
        <link rel="icon" type="image/png" sizes="32x32" href="media/favicon-32x32.png">
	</head>
    <body>
  <header id="header" class="header">
            <ul class="sociallist">
              <li class="youtube"><a href="https://www.youtube.com/channel/UCyNi8D-XcpZnZAQVlzQj2RQ" class="sociallink">youtube</a></li>
              <li class="facebook"><a href="http://www.facebook.com/RissewGaming" class="sociallink">facebook</a></li>
              <li class="twitter"><a href="http://www.twitter.com/RissewGaming" class="sociallink">twitter</a></li>
              <li class="twitch"><a href="http://www.twitch.tv/Rissew" class="sociallink">twitch</a></li>
            </ul>        
            <img class ="headerbig" source="assets/images/headerbig.png"alt="Rissew Gaming">
          <nav class="nav">
            <ul class="navlist">
              <li class="page-nav__item"><a href="index.html" title="" class="navlink active">Home</a></li>
              <li class="page-nav__item"><a href="about.html" title="" class="navlink">About</a></li>
              <li class="page-nav__item"><a href="guides.html" title="" class="navlink">Guides</a></li>
              <li class="page-nav__item"><a href="forum.html" title="" class="navlink">Forum</a></li>
              <li class="page-nav__item"><a href="shop.html" title="" class="navlink">Shop</a></li>
              <li class="page-nav__item"><a href="watch.html" title="" class="navlink">Watch</a></li>
            </ul>
          </nav>
  </header>
        
        <main>
        </main>
        <footer>
            <p>
            </p>
        </footer>
    </body>

相关问题
最新问题