HTML图像不能垂直居中[重复]

问题描述 投票：0回答：4

这个问题在这里已有答案：

在

<!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就是它在实践中的样子。

html css
4个回答
0
投票

您可以使用flexbox和属性align-items: center垂直居中菜单的内容。

如果使用flexbox，您将不需要使用float。要从徽标中分隔菜单项，请将margin-right: auto添加到徽标中。

我已经简化了下面演示的代码，并删除了一些错误。 （.topnav宽度和高度需要单位，过渡'text'不是属性）

.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;
}
<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>
0
投票

您可以使用CSS flexbox使徽标和菜单垂直居中。

.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>
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>
0
投票

您还可以考虑“Bootstrap4”，它为您的样式提供了出色的浏览器支持。使用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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.