Question

这有很多麻烦，我想我差不多了。这是它到目前为止看起来像它现在不均匀（图像标志更多的是在右边，而不是在中心。我试图得到它，以便图像在中心，两个链接在任何一个它的一面。Click here for image

HTML：

当前代码：

<div id="navbar">
  <ul>
    <li>Home</li>
    <li>The Collective</li>
    <img src="images/jc.jpg">
    <li>About</li>
    <li>Store</li>
  </ul>
</div>

CSS：

#navbar li {
    display: inline;
    padding-right: 40px;
}

对不起，我对这一切都很陌生，非常感谢任何帮助！

Answer 1

＆＃13;

#container{
	background-color:white;
	width: 1250px;
	margin-left: auto;
	margin-right: auto;
	
	
}

#header{
	background-color: black;
	color: white;
	text-align:center;
	width: 1250px;
	height:200px;
	
}

body {
	background-color:#EEE;
}

#navbar li {
 
	display: inline;
	padding-right: 40px;
}

#content {
	padding: 10px;	
}

#main1 {
	width: 400px;
	float:left;
	border-style:solid;
	border-width:2px;
	padding:10px;
	margin-left:150px;
 	
	
	
}
#main2 {
	width:400px;
	float: right;
	border-style:solid;
	border-width:2px;
	padding:10px;
	margin-right:150px;
}

#footer {
	clear:both;
	text-align:center;
	padding:10px;
}

＆＃13;

<html>
<head>
	<title> JC4ME Homepage </title>
	<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>
	<div id="container">
		
		<div id="header">
			<div id="navbar">
				<ul>
					<li>Home</li>
					<li>The Collective</li>
					<li><img src="http://s33.postimg.org/xc68nnswf/image.jpg"></li>
					<li>About</li>
					<li>Store</li>
					</ul>
			</div>
		</div>
		
		<div id="content">
			<div id="main1">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

			</div>
			<div id="main2">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</div>
		</div>
		
		<div id="footer">
			Copyright &copy; 2016 Ibz 
		</div>
	</div>
		
</body>

</html>

＆＃13;

将图片放入<li>标记

<div id="navbar">
  <ul>
    <li>Home</li>
    <li>The Collective</li>
    <li><img src="images/jc.jpg"></li>
    <li>About</li>
    <li>Store</li>
  </ul>
</div>

Answer 2

您可以使用display:table执行某些操作：

＆＃13;

#navbar {
    display: table;
}
#navbar ul, #navbar img {
    display: table-cell;
    margin: 0;
    padding: 0;
}
#navbar .left, #navbar .right {
    width: 50%;
    vertical-align: middle;
}
#navbar li {
    display: inline;
    list-style: none;
}
.right {
    text-align: right;
}

＆＃13;

<div id="navbar">
    <ul class="right">
        <li><a href="#">Home</a></li>
        <li><a href="#">The Collective</a></li>
    </ul>
    <img src="http://placehold.it/100x100?text=LOGO">
    <ul class="left">
        <li><a href="#">About</a></li>
        <li><a href="#">Store</a></li>
    </ul>
</div>

＆＃13;

Answer 3

为li元素inline-block添加vertical-align:bottom和您的中心ul

#navbar {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
}
#navbar li {
  display: inline-block;
  vertical-align: bottom;
  padding: 0 10px;
}

    <div id="navbar">
      <ul>
        <li>Home</li>
        <li>The Collective</li>
        <li><img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"></li>
        <li>About</li>
        <li>Store</li>
      </ul>
    </div>

在图像的任一侧（两侧）添加导航链接

3 个答案: