如何将链接居中，图像链接浮动在其旁边

how to center links with image links floating right next to it

本文关键字：链接 图像      更新时间：2023-09-26

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

仅供参考，我将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/

相关文章：