在
<!DOCTYPE html>
<html>
<title> 51 Pegasi Studios </title>
<link rel="icon" href="file:///D:/Files/51PEGASI/icon.png">
<head>
<style>
.topnav {
position: sticky;
font-family: 'Roboto', sans-serif;
background-color: black;
overflow: hidden;
margin-left: 0%;
margin-right: 0%;
color: white;
padding-right: 15%;
padding-left: 15%;
width: 50;
height: 50;
}
.topnav a {
transition: text 0.15s ease-in-out;
float: left;
color: #f2f2f2;
padding: 18px 18px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
color: #977DA0;
}
.topnav a.active {
color: white;
}
</style>
</head>
<body>
<div class="topnav">
<a style="text-align:left" href=""><img src="pegasiLeft.png" height="15%" width="15%" alt="51 Pegasi logo"></a>
<a style="float:right;" class="active" href="#home"><b>HOME</b></a>
<a style="float:right;" href="#about"><b>ABOUT</b></a>
<a style="float:right;" href="#gamedesign"><b>GAME DESIGN</b></a>
<a style="float:right;" href="#gamedev"><b>GAME DEV</b></a>
<a style="float:right;" href="#programming"><b>PROGRAMMING</b></a>
<a style="float:right;" href="#music"><b>MUSIC</b></a>
</div>
</body>
</html>
我想让图像垂直居中,类似于文本按钮,与它们在同一条线上。我已经尝试过不同的对齐等等,但没有成功。我假设有一种方法可以去做,而不必使用与文本不同的方法。
This就是它在实践中的样子。
答案 0 :(得分:0)
您可以使用flexbox和属性align-items: center
垂直居中菜单内容。
如果使用flexbox,您将不需要使用float
。要从徽标中分隔菜单项,请将margin-right: auto
添加到徽标中。
我已经简化了下面演示的代码,并删除了一些错误。 (.topnav宽度和高度需要单位,过渡&#39;文字&#39;不是属性)
.topnav {
position: sticky;
font-family: 'Roboto', sans-serif;
background-color: black;
color: white;
/*padding: 0 15%;*/
display: flex;
align-items: center;
}
.logo {
margin-right: auto;
}
.topnav a {
transition: color 0.15s ease-in-out;
color: #f2f2f2;
padding: 18px;
text-decoration: none;
font-size: 10px;
}
.topnav a:hover {
color: #977DA0;
}
.topnav a.active {
color: white;
}
&#13;
<div class="topnav">
<a class="logo" href=""><img src="https://unsplash.it/20" alt="51 Pegasi logo"></a>
<a class="active" href="#home">HOME</a>
<a href="#about">ABOUT</a>
<a href="#gamedesign">GAME DESIGN</a>
<a href="#gamedev">GAME DEV</a>
<a href="#programming">PROGRAMMING</a>
<a href="#music">MUSIC</a>
</div>
&#13;
答案 1 :(得分:0)
您可以使用CSS flexbox垂直居中徽标&amp;菜单。强>
.topnav{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.navigation{
text-align: right;
}
.navigation ul{
margin: 0;
list-style: none;
}
.navigation ul li{
display: inline-block;
}
<div class="topnav">
<div class="logo">
<a href="#"><img src="http://lorempicsum.com/futurama/50/50/1" alt="logo"></a>
</div>
<div class="navigation">
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a></li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
</ul>
</div>
</div>
答案 2 :(得分:0)
您可以通过在display: flex
类上添加.topnav
并删除图片代码上的15%宽度和高度来实现此目的。最后在align-items: center;
类上添加.topnav
以垂直居中图像。
<!DOCTYPE html>
<html>
<title> 51 Pegasi Studios </title>
<link rel="icon" href="file:///D:/Files/51PEGASI/icon.png">
<head>
<style>
.topnav {
position: sticky;
display: flex;
align-items: center;
font-family: 'Roboto', sans-serif;
background-color: black;
overflow: hidden;
margin-left: 0%;
margin-right: 0%;
color: white;
padding-right: 15%;
padding-left: 15%;
width: 50;
height: 50;
}
.topnav a {
transition: text 0.15s ease-in-out;
color: #f2f2f2;
padding: 18px 18px;
text-decoration: none;
font-size: 20px;
}
.topnav a:hover {
color: #977DA0;
}
.topnav a.active {
color: white;
}
.center-image {
width: 120px;
}
</style>
</head>
<body>
<div class="topnav">
<a href=""><img class="center-image" src="https://image.ibb.co/jQbTAx/Screenshot_2018_03_01_23_57_22.png" alt="51 Pegasi logo"></a>
<a style="float:right;" class="active" href="#home"><b>HOME</b></a>
<a style="float:right;" href="#about"><b>ABOUT</b></a>
<a style="float:right;" href="#gamedesign"><b>GAME DESIGN</b></a>
<a style="float:right;" href="#gamedev"><b>GAME DEV</b></a>
<a style="float:right;" href="#programming"><b>PROGRAMMING</b></a>
<a style="float:right;" href="#music"><b>MUSIC</b></a>
</div>
</body>
</html>
&#13;
答案 3 :(得分:0)
你也可以考虑&#34; Bootstrap4&#34;它为您的样式提供了出色的浏览器支持。使用BS4,您只需要在HTML中添加相应的类,它就可以在大多数浏览器中正常运行而不会出现问题。您的代码可能如下所示:
<!doctype html>
<html lang="en" style="overflow: hidden">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</head>
<body>
<div class="container d-flex align-items-center" style="background-color: #0FF; height: 150px;">
<div class="container">
<a class="float-left" href=""><img src="https://unsplash.it/20" alt="51 Pegasi logo"></a>
<a class="float-left" href="#home">HOME</a>
<a class="float-right pr-2" href="#about">ABOUT</a>
<a class="float-right pr-2" href="#gamedesign">GAME DESIGN</a>
<a class="float-right pr-2" href="#gamedev">GAME DEV</a>
<a class="float-right pr-2" href="#programming">PROGRAMMING</a>
<a class="float-right" href="#music">MUSIC</a>
</div>
</div>
</body>
</html>
&#13;