个人中心
gpt4 book ai didi

html - 如何将我的 Logo 插入横幅并居中对齐？

转载 作者：太空宇宙 更新时间：2023-11-03 20:32:10 26 4
gpt4 key购买 nike

我无法将我的 Logo 插入页面顶部的白色横幅内。

在我的代码中你必须注意的是 header ID:

<div id="header">
      <p class="LogoFF1">FF1 Site</p> 
</div>
<div class="wrapper"></div>

请引用我的JSFiddle链接:

谢谢你:)

最佳答案

只需为 Logo 类添加此 css:

.LogoFF1 {
  text-align: center;
  margin: 0;
}

body {
  background-color: #101010;
}

header{
	height:50px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;	
}

#header{
	height:150px;
    background:#F0F0F0;
    border:1px solid #CCC;
    width:960px;
    margin:0px auto;
	text-shadow: 6px 5px 4px #FF0000;
	font-size:130px;
	position: relative;
}

h2.main {
	font-size: 20px; 
	letter-spacing:1px; 
	text-align: center;
	text-shadow: 0px 0px 2px #2050FF,
				-2px -2px 2px #2050FF,
				 2px -2px 2px #2050FF,
				-2px 2px 2px #2050FF,
				 2px 2px 2px #2050FF;"
}

#section {
	max-width: 960px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
}

#section2 {
	max-width: 1000px;
    color: #FFFFFF;
    padding:4px;	
     margin-top: auto;
     margin-bottom: auto;
     margin-right: auto;
     margin-left: auto;
	 padding-left: 220px;
    text-align: center; 
	letter-spacing: 1px;
	
}

.main-header {
  text-align: center;
  padding: 5px;
  padding-left: 300px;
  height: 160px;
  margin: left;
}
IMG.displayed {
  display: block;
  margin-left: auto;
  margin-right: auto;
  float: left;
}
h1 {
  color: #ffffff;
}
div.wrapper {
  margin: 10px left;
  width: 250px;
  float: left;
}
nav.vertical {
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .15);
  overflow: hidden;
  text-align: center;
}

nav.vertical > ul {
  padding: 0;
}

nav.vertical > ul > li {
  display: block;
}
nav.vertical > ul > li > label,
nav.vertical > ul > li > a {
  background: rgb(181,189,200); /* Old browsers */
  background: -moz-linear-gradient(top, rgb(181,189,200) 0%, rgb(130,140,149) 36%, rgb(40,52,59) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(181,189,200) 0%,rgb(130,140,149) 36%,rgb(40,52,59) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1), 0 1px 1px rgba(0, 0, 0, .1);
  color: rgb(255, 255, 255);
  display: block;
  font-size: .85rem;
  font-weight: 500;
  height: 50px;
  line-height: 50px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  text-transform: uppercase;
  transition: all .1s ease;
  text-decoration: none;
}
nav.vertical > ul > li > label:hover,
nav.vertical > ul > li > a:hover {
  background-color: rgb(114, 51, 98);
  background-image: -webkit-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -moz-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: -o-linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  background-image: linear-gradient(150deg, rgb(114, 51, 98), rgb(114, 51, 98));
  cursor: pointer;
}
nav.vertical > ul > li > label + input {
  display: none;
  visability: hidden;
}
/* unvisited link */

a:link {
  color: #AAAAFF;
}
/* visited link */

a:visited {
  color: #DD04FF;
}
/* mouse over link */

a:hover {
  color: #FF0000;
}
/* selected link */

a:active {
  color: #FFCC00;
}
footer {
  color: #ffffff;
}
nav {
  background-color: dimgrey;
  border: 5px solid #333;
}
nav ul {
  nav ul: list-style-type: none;
}
nav li {
  padding: 2px;
  display: inline-block;
  border-right: 1px solid #fff;
}
nav li a:link {
  text-decoration: none: font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  font-family: sans-serif;
  font-size: 0.9em;
}
nav li:hover {
  background-color: teal;
}

.LogoFF1 { 
  text-align: center;
  margin: 0;
}
<!DOCTYPE html>
<html>

<head>
  <title>About</title>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <meta charset="UTF-8">
</head>

<body>
  <main>
   <div id="header">
      <p class="LogoFF1">FF1 Site</p> 
    </div>
    <div class="wrapper">
      <nav class="vertical">
        <ul>
          <li>
            <a href="homePage.html">Home</a>
          </li>
          <li>
            <a href="profile.html">Profile</a> 
          </li>
          <li>
            <a href="personalBests.html">Personal Bests</a>
          </li>
          <li>
            <a href="links.html">Links</a>
          </li>
		  <li>
            <a href="about.html">About</a>
          </li>
        </ul>
      </nav>
    </div>
   <div id="section">
      <article>
        <h2>About</h2>
     <p>
	Hello there, and welcome to FireFalcons personal website!
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pharetra rutrum massa vitae cursus.
	Integer condimentum sollicitudin tristique. Ut lectus mi, iaculis eget faucibus quis, tincidunt eu ligula.
	Aliquam id ornare dui. Nulla efficitur ipsum vitae magna ultricies placerat ullamcorper ut turpis.
	Ut sed malesuada nibh. Phasellus fringilla ex a eros volutpat consectetur.
	</p>
      </article>
    </div>
    <hr>
    <footer>
      <strong>
                Copyright &copy; 2016 Stephen Fawcett, All rights reserved
        </strong>
    </footer>
  </main>
</body>

</html>

关于html - 如何将我的 Logo 插入横幅并居中对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39695626/

26 4 0
文章推荐： html - CSS 无法在网页中运行
文章推荐： python - 在Python中对值进行分组和划分
文章推荐： python - 将嵌套 json 解压到数据框中的有效方法
文章推荐： html - 如何使用 CSS 删除图像之间的空白？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com