我是css / html的新手,我正在尝试为自己创建一个portofolio网站。
我想在我的图片中将nav_bar水平居中放在我的图像下,但我似乎无法使其正常工作。
如您所见,nav_bar当前是垂直对齐的。
这是我的代码:
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}

<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
&#13;
希望有人可以帮助我:)。
提前致谢
答案 0 :(得分:3)
使用display:flex;
至ul
和justify-content: center;
将其置于中心
.index_navigation ul{
display:flex;
justify-content: center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
&#13;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Xander Feliers - Portfolio</title>
<meta name="description" content="Portfolio - Xander Feliers">
<link rel="stylesheet" href="css/screen.css">
</head>
<body>
<div class ="background_logo">
<img src="https://material.angular.io/assets/img/examples/shiba1.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
</body>
</html>
&#13;
答案 1 :(得分:0)
将li
的显示样式设置为inline-block
s,并将text-align:center应用于其父级。
.index_navigation{
text-align:center;
}
.index_navigation li{
overflow: hidden;
text-align: center;
padding-right: 20px;
display:inline-block;
}
.index_navigation a {
font-family: arial;
color:black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center{
width:50%;
text-align:center;
display:block;
background-color: transparent;
margin-left:auto;
border: 1px solid transparent;
margin-right: auto ;
margin-bottom: 1px;
float:center;
}
&#13;
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
&#13;
答案 2 :(得分:0)
您可以使用<table>
重新构建菜单。将<ul>
替换为<tr>
&amp;将<li>
替换为<td>
。
答案 3 :(得分:0)
我这样做:
.background_logo NAV {
float: right;
position: relative;
left: -50%;
}
.index_navigation {
position: relative;
left: 50%;
}
.clearfix {
clear: both;
}
然后添加正确的clearfix DIV:
<div class ="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class ="center" >
<div class="clearfix"/> <!-- added clearfix -->
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>
<div class="clearfix"/> <!-- added clearfix -->
答案 4 :(得分:0)
我只是将li显示:inline-block和ul for text-align:center。
ul {
text-align: center
}
.index_navigation li {
overflow: hidden;
text-align: center;
float: center;
padding-right: 20px;
display: inline-block;
}
.index_navigation a {
font-family: arial;
color: black;
text-align: center;
padding: 14 px 16 px;
text-decoration: none;
}
.center {
width: 50%;
text-align: center;
display: block;
background-color: transparent;
margin-left: auto;
border: 1px solid transparent;
margin-right: auto;
margin-bottom: 1px;
float: center;
}
<div class="background_logo">
<img src="img/logo_size.jpg" alt="Background Logo" class="center">
<nav class="index_navigation">
<ul>
<li><a href="contact.html">Contact</a></li>
<li><a href="projects.html">Projects</a></li>
<li><a href="about.html">About</a></li>
</ul>
</nav>
</div>