垂直居中HTML标头 [英] Vertically center an HTML header

问题描述

我似乎无法让我的标题将标题居中放在标题框的中间。它现在看起来如何，它有新闻，联系方式，以及有关链接高度在框中，而不是集中。

HTML：

 < ul> 
< li style =float：left>< a class =active< a onclick =window.open（this.href，this.target）; return false; href =http：// link /target =link> < img src =Logo.pngalt =Logostyle =width：125px; height：75px;>< / a>< / li> 
< li>< a href =＃news>新闻< / a>< / li> 
< li>< a href =＃contact>联络< / a>< / li> 
< li>< a href =＃about>关于< / a>< / li> 
  

CSS：

  ul {
 list-style-type：none; 
保证金：0; 
 padding：10px; 
 overflow：hidden; 
背景颜色：黑色; 
} 
 
 li {
 float：left; 
} 
 
 li a {
 display：inline-block; 
颜色：白色; 
 text-align：center; 
 padding：14px 20px; 
 text-decoration：none; 
} 
 
 li a：hover：not（.active）{
 background-color：red; 
} 
 
 .active {
 background-color：black; 
 
  

解决方案

试试这个：

  .li {
 position：relative ; 
 top：50％; 
 transform：translateY（-50％）; 
} 
  

工作方式

/ strong>清理了一些不平衡的HTML问题，并清理了CSS：

data-console =true>

ul {list-style-type ： 没有;保证金：0;填充：50px; / *根据需要进行调整* / overflow：hidden; background-color：black;} li {float：left;位置：相对;顶部：50％; transform：translateY（-50％）;} li a {display：inline-block;白颜色; text-align：center; padding：14px 20px; text-decoration：none;}

< ul> <李> < a class =activeonclick =window.open（this.href，this.target）; return false; href =http：// link /target =link> < img src =Logo.pngalt =Logostyle =width：125px; height：75px;>< / a> < /锂> < li>< a href =＃news>新闻< / a>< / li> < li>< a href =＃contact>联络人< / a>< / li> < li>< a href =＃about>关于< / a>< / li>< / ul>

I can not seem to get my header to have the titles centered in the middle of the header box. How it looks now, it has the news, contacts, and about links high up in the box and not centered.

HTML:

<ul>
<li style="float:left"><a class="active" <a onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo"    style="width:125px;height:75px;"></a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>

CSS:

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: black;
}

li {
    float: left;
}

li a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 20px;
    text-decoration: none;
}

li a:hover:not(.active) {
    background-color: red;
}

.active {
    background-color: black;
} 

解决方案

Try this on the <li>:

.li {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

how this works

EDIT: Cleaned up some unbalanced HTML issues and cleaned up the css:

ul {
  list-style-type: none;
  margin: 0;
  padding: 50px; /* adjust as necessary */
  overflow: hidden;
  background-color: black;
}

li {
  float: left;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

<ul>
  <li>
    <a class="active" onclick="window.open(this.href, this.target);return false;" href="http://link/" target="link"> <img src="Logo.png" alt="Logo" style="width:125px;height:75px;"></a>
  </li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

这篇关于垂直居中HTML标头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！