html - Logo 不会在标题标签内向左或向右移动-6ren

html - Logo 不会在标题标签内向左或向右移动

转载作者：太空宇宙更新时间：2023-11-04 09:30:27

24

4

我试图将我的 Logo 放在中心或我的页面(标题中心和菜单导航上方)它离开菜单但不会向左或向右横向移动，无论如何都保持在同一位置.

我已经尝试了所有搜索谷歌但没有结果显示。尝试使标题相对并尝试使菜单相对。这是我的代码。

body {
width: 800px;
margin: 100px auto 0 auto;
background: darkgrey;
font-family: arial;
display: block;
}

#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}

#h1.logo {
position: absolute;
right: 50px;
}

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 520px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right:5px;
  0% { /* space between content and footer*/
    position: absolute;
    top: 20;
    right: 50px;
  }

}
footer {
  display: inline-block;
        width:800px;
        text-align: left;
        margin-top: 250px;

}

footer ul {list-style-type: none;
text-align: center;
float: left;
}

footer li {display:inline;
}

footer a:link{
  text-decoration: none;
}

footer p {
 float:right;
}

table {border: solid darkgrey thin;
position: relative; 
left: -100px;
z-index: 2;

<body>

<header>
<h1 class="logo">
<img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
<li><a href="index.html" title="tab1">Home</a></li>
<li><a href="about.html" title="tab2">About</a></li>
<li><a href="portfolio.html" title="tab3">Portfolio</a></li>
<li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer> <!--footer starts here-->

  <div id="tab3">

 <table border="0" width=1024px height=0px>
  <tr>
    <td><a href="index.html"><img src="images/logoicon.png"/></a></td>
    <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
    <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
  </tr>
</table>

  </div>    


</footer> <!--end of footer-->

</body>

最佳答案

您可以通过将 text-align:center; 添加到图像的父级(带有类 Logo 的 h1)来解决此问题

我注意到你的页面右边有一个大嘴巴

首先:你不应该在 body 上使用宽度你必须创建一个容器并给它一个固定的宽度

第二:你不应该在你所有的页面中使用位置，那会把它弄乱，你应该只在需要的时候使用它

<header>
<h1 class="logo">
<img src="images/Logodraft.png" alt="Kieron's Logo" title="Kieron's Logo" />
</h1>
</header>

<!--navigation starts here-->

<!--An unordered list that holds the tab navigation items-->
<ul id="tabs">
<li><a href="index.html" title="tab1">Home</a></li>
<li><a href="about.html" title="tab2">About</a></li>
<li><a href="portfolio.html" title="tab3">Portfolio</a></li>
<li><a href="blog.html" title="tab4">Blog</a></li>
</ul>

<!--A wrapper for each tab content-->

<div id="content">
</div>
<!--end  content div-->

<footer> <!--footer starts here-->

  <div id="tab3">
  <!-- change width to 100% and remove height-->
 <table border="0" width="100%">
  <tr>
    <td><a href="index.html"><img src="images/logoicon.png"/></a></td>
    <td><a href="index.html">Home | </a> <a href="about.html">About | </a> <a href="portfolio.html">Portfolio | </a> <a href="blog.html">Blog</a></td>
    <td align="right"><small>&copy;copyright 2016 Kieron Roberts</small></td>
  </tr>
</table>

  </div>    


</footer> <!--end of footer-->

CSS:

body {
/*width: 800px;*/ /*deleted*/
/*margin: 100px auto 0 auto;*//*deleted*/
background: darkgrey;
font-family: arial;
display: block;
}

#header {
width: 800;
height: auto;
margin: 0;
background: transparent;
}
/*
#h1.logo {
position: absolute;
right: 50px;
}*//*deleted*/

#tabs{
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#content
{
    background: #fff;
    padding: 2em;
    height: 520px;
    position: relative;
    z-index: 2;
    border-radius: 0 5px 5px 5px;
    box-shadow: 0 -2px 3px -2px rgba(0, 0, 0, .5);
}

#tab2 {
  position: relative;
}

#icons img {
  padding-right:5px;
  0% { /* space between content and footer*/
    position: absolute;
    top: 20;
    right: 50px;
  }

}
footer {
  display: inline-block;
        width:800px;
        text-align: left;
       /* margin-top: 250px;*//*deleted*/

}

footer ul {list-style-type: none;
text-align: center;
float: left;
}

footer li {display:inline;
}

footer a:link{
  text-decoration: none;
}

footer p {
 float:right;
}

table {border: solid darkgrey thin;
position: relative; 
/*left: -100px;*//*deleted*/
z-index: 2;}


/*added*/
.logo{

  text-align: center;
}

This how it should look like

关于html - Logo 不会在标题标签内向左或向右移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40832764/

24

4

0

文章推荐： html - 导航栏折叠在 Bootstrap 中不起作用

文章推荐： Linux Intel 64bit 汇编事业部

文章推荐： python - 在 Python 中运行 shell 内置命令

文章推荐： html - 当 child 在多行时根据 child 的宽度调整容器的宽度

CSS 分页符向左/向右
有没有人知道那里有预览@page CSS 规则的工具？如果做不到这一点，有什么东西可以用来打印完全支持这些规则的文档吗？ http://www.w3.org/TR/CSS2/page.html 歌剧最
css - 向右/向左浮动使元素隐藏
出于某种原因，当我向我的元素添加右/左浮动时，它会在下一行的图像元素后面显示它们。这是实际的事件页面: http://www.dealerbyte.co.uk/used-cars.php 代码如下:
android - 如何检测向左、向右、向上和向下的运动
我想知道是否可以使用下面的 onTouch 方法来检测用户是否在屏幕上向左、向右、向上或向下移动手指。我有一个包含对象的网格，我只希望用户能够在四个方向上移动其中一个对象。我的想法是使用 Actio
jQuery:鼠标移动事件 - 元素内向左、向右
我想获取div的鼠标坐标，如下所示: $("#box").mousemove(function(e){ var x = e.pageX - this.offsetLeft; var y = e.pag
c# - 让玩家根据摄像机角度向前、向右、向左和向后移动
到目前为止，我有一个可以左右前后移动的玩家，但是我如何设置它是向前的，就像在网格上一样向前，而不是在我的玩家注视的地方向前。我将相机设置为 FPS，它跟随玩家。现在我想让玩家能够使用我的 MouseL
javascript - 如何使水平时间轴 slider 向右
在水平时间轴 slider jquery 中，我希望默认情况下它是右向的。就像现在的图片，2015 年的价格就在右边。我希望默认选择最右边的 2017 年价格，用户可以向左滚动我的代码 $('.ti
Java - 图标未对齐的 JLabel(向右)
我正在尝试为纸牌游戏(Yu-Gi-Oh :D)制作一个牌组管理器，目前我只有一个包含可用纸牌的表格和一个面板，该面板以更大的尺寸显示用户选择的纸牌以及纸牌的描述。MVCE: import ja
java - 根据速度或其他变量向左、向右、向上和向下滑动
我有一个从简单手势扩展的类，我正在使用 onfling 方法: class MyGestureListener extends GestureDetector.SimpleOnGestureListe
Eclipse 在不使用箭头键的情况下向左/向右/向上/向下移动光标
我很懒惰，讨厌每 5 秒就必须将右手移到箭头键或鼠标上来移动光标和编辑文本。有什么方法可以让我的手保持在打字位置并四处移动光标？最佳答案您可以在特定的首选项窗口中更改这些设置: windows -
android - 我尝试使用动画使线性布局平移，像这样向左 <-> 向右。但我有一些错误
这是我的第一个应用程序，我尝试进行从右到左或从左到右的翻译。这是代码 Res > anim > translate_left Res > anim > translate_right
css - 向右 move 100% 宽度的固定元素
我有以下代码: out of bound :( 我不希望它穿过 window 。我需要它的右边框保持可见。 JSFiddle 链接:http://jsfiddle.net/9SZAB/ 最佳答案
jquery - 包装内的 float div 向右
我正在尝试让我的导航图标菜单按钮在 THIS IS A LOGO Home About
javascript - d3.js 线图错误移动(向右)
因为我自己的代码有问题，所以我正在研究以下链接: https://bost.ocks.org/mike/path/ 我想我已经低于 // push a new data point onto the
html - 带有搜索栏的中心 Logo 向右 Bootstrap
所以首先这就是我要实现的目标我想保持 Logo 在网页中间居中，搜索栏向右拉(下面有文字)这是我目前拥有的代码: http://jsfiddle.net/62b4jf1n/
Android ListView 向右/向左滑动，如通话记录
这个问题在这里已经有了答案: Android: How to handle right to left swipe gestures (22 个回答) 关闭4个月前。我有一个 Android 应用程
ios - 在矩形框(如开关)内移动按钮(向左/向右)
我正在尝试创建一个控件，用户可以在该控件中触摸并移动框架内的按钮。这是我的代码。 - (void)wasDragged:(UIButton *)button withEvent:(UIEvent *)
javascript - js/jq中检测鼠标向上、向左、向右、向下移动
我正在使用svg创建一个几何campass工具，其中有3个btns，1) 用于移动位于中心的整个营地2) 增加圆的半径3)用于旋转圆的半径4)根据第4个btn的位置使用路径(svg)绘制圆，该位置始终
php - Css/php - 向右 move block
无论分辨率如何，我都试图将此框移到屏幕的右侧，但我找不到答案。我的代码是这样的 wp_get_archives( array( 'type' => 'postbypost',
c++ - 设置 Qt QPushButton 弹出菜单的位置(向右)
我正在为 Qt 按钮小部件编写弹出菜单。每当单击按钮时，都会弹出一个菜单(在按钮下方)。弹出菜单默认位于下方左侧。有没有办法让弹出菜单在按钮下方的右侧弹出？没有设置位置功能，所以我想知道是否有一
javascript - 如何使用 JS/jQuery 处理两个按钮单击(同时向左+向右)？
我正在尝试使用 jQuery 构建一个扫雷游戏，我成功地使用 event.which 处理了左右点击，但是是否可以同时检测到左右按钮的点击？最佳答案我怀疑你是否会同时获得两者，一次会先出现，即使相

首页

博学

6Ren·AI

商城

html - Logo 不会在标题标签内向左或向右移动