个人中心
gpt4 book ai didi

javascript - 如何将链接与 float 在其旁边的图像链接居中

转载 作者：行者123 更新时间：2023-11-28 05:49:13 25 4
gpt4 key购买 nike

您好，我希望将导航栏中心的文本链接放在页面顶部，但它们没有正确居中，因为我有 3 个图像链接 float 在同一个导航栏中的右侧。

仅供引用，我将 css 和 js 都放在单独的文件中，并且它们链接到我的 html。

document.getElementById("foot01").innerHTML =
"<p>&copy;  " + new Date().getFullYear() + " SITE. All rights reserved.</p>";

document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
"<li><a class='regular' href='Placeholder1.html'>Placeholder2</a></li>" +
"<li><a class='regular' href='Placeholder1.html'>Placeholder3</a></li>" +
"<li><a class='regular' href='Placeholder1.html'>Placeholder4</a></li>" +
"<li><a class='regular' href='Placeholder1.html'>Placeholder5</a></li>" +
"<li><a class='social' href='instagram.html'><span class='socialtrans'></span><img src='graphics/Instagram_App_Large_May2016_200.png' alt='instagram'></a></li>" +
"<li><a class='social' href='youtube.html'><span class='socialtrans'></span><img src='graphics/YouTube-logo-full_color.png' alt='youtube'></a></li>" +
"<li><a class='social' href='soundloud.html'><span class='socialtrans'></span><img src='graphics/soundcloud-icon.png' alt='soundcloud'></a></li>"
"</ul>";

function setActive() {
aObj = document.getElementById('nav01').getElementsByTagName('a');
for(i=0;i<aObj.length;i++) { 
if(document.location.href.indexOf(aObj[i].href)>=0) {
  aObj[i].className='active';
}
}
}

window.onload = setActive;

window.onscroll = function() {addnavbg()};

function addnavbg() {
if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
    document.getElementById('menu').className = 'navbg';
} else {
    document.getElementById('menu').className = '';
}
}
/* website style */

body {
font-size: 16px;
background-color: #ffffff; 
color: #000000;
width: 100%;
margin: 0 auto;
}

#header {
height:auto;
width:100%;
margin-top:60px;
}

#main {
max-width:1024px;
margin:0 auto;
}

footer {
width:100%;
text-align:center;
}

/* license info */

img {
width: 100%;
height: auto;
}

/* navigation */

ul#menu {
list-style-type: none;
margin: 0 auto;
padding: 0;
overflow: hidden;
position: fixed;
top: 0;
width:100%;
height:auto;
text-align:center;
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
transition:background-color 0.2s linear;
}

.navscrolldown {background-color:#424242;}

ul#menu li {display:inline;}

ul#menu li a {
background-color:transparent;
font-weight: bold;
text-decoration: none;
color: #000000;
   	display:inline-block;
padding: 10px 16px;
transition:color 0.2s;
}

ul#menu li a:hover {
background-color:transparent;
font-weight: bold;
color:#FF0000;
}

ul#menu a.regular:link {padding-top:15px;}

ul#menu li a.active {color:#ff0000;}

/* social media links */

ul#menu a.social:link {
border:0;
height:30px;
width:30px;
float:right;
}

ul#menu a.social.link:hover {display:inline-block;}

.socialtrans {
position:absolute;
width:30px;
height:30px;
float:right;
opacity:1;
transition:opacity 0.2s;
}

.socialtrans:hover {
background-color:#ffffff;
opacity:0.7;
}

/* iframe */

iframe#mfs_html5 {
width:100%;
height:510px;
border:0;
overflow:hidden;
}

document.getElementById("nav01").innerHTML="<ul id='menu'>" +"<li><a href='Placeholder1.html'>Placeholder1</a></li>" +"<li><a href='Placeholder1.html'>Placeholder1</a></li>" +"<li><a href='Placeholder1.html'>Placeholder1</a></li>" +"<li><a href='Placeholder1.html'>Placeholder1</a></li>" +"<li><a href='Placeholder1.html'>Placeholder1</a></li>" +"<li><a class='social' href='Placeholder1.html' ><span class='hvr'></span><img src

<!DOCTYPE html>
<html lang="en-us">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="llorem ipsum" />
<meta name="keywords" content="llorem ipsum" />
<title>Placeholder1</title>
<link href="site.css" rel="stylesheet">
</head>
<body>

<nav id="nav01"></nav>

<div id="main">

<div id="header"><img src="graphics/header.jpg" alt="header"></div>

<iframe id="mfs_html5" src="Placeholder1"></iframe>

<div id="info"><img src="graphics/Placeholder1.png" alt="Placeholder1"></div>

</div>

<footer id="foot01"></footer>

<script src="script.js"></script>

</body>
</html>
<div id="nav01"></div>

最佳答案

您可以尝试使用 display:table; 并将导航元素的最外层设置为 margin: 0 auto; 在本例中为 #nav01.

/* navigation */

#nav01{
 display: table;   /* Allow the centering to work */
 margin: 0 auto;
}

ul#menu {
 margin:0 auto;
 list-style-type: none;
 padding: 0;
}

ul#menu li{
 float:left;
 margin-left: 10px;
}

https://jsfiddle.net/pg4w30yv/

关于javascript - 如何将链接与 float 在其旁边的图像链接居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38220527/

25 4 0
文章推荐： javascript - 检查数组索引是否大于循环中的值
文章推荐： javascript - 如何用 Chrome 扩展上下文菜单替换输入字段选定的文本？
文章推荐： javascript - 如何将图像数组上传到 firebase 存储？
文章推荐： javascript - 打印时如何将特定的 html 区域放在额外的页面上
行者123
个人简介

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

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