如何将链接与浮动在它旁边的图像链接居中答案

【问题标题】：how to center links with image links floating right next to it如何将链接与浮动在它旁边的图像链接居中
【发布时间】：2016-07-06 09:25:00
【问题描述】：

您好，我想将导航栏的文本链接放在页面顶部，但它们没有正确居中，因为我有 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>

&lt;div id="nav01"&gt;&lt;/div&gt;

【问题讨论】：

我已经添加了html

标签： javascript html css navigation navbar

【解决方案1】：

您可以尝试使用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/

【讨论】：

我试图在我的 css 中实现它，但我无法让它工作。
是的，我做到了，它在 jfiddle 中运行良好，但如果我尝试将您的代码放入我的 css 中，它确实有效。我更新了 css 代码也许你可以再看看它，因为自从我发布这个问题以来我已经改变了它。