Question

您好我正在尝试将文字“ MyBrand ”与框中间对齐（在橙色中突出显示）。但无法实现这一目标。我尝试过使用' vertical-align：middle '。但这不起作用。我在这里缺少什么？

CSS

header, nav, form, a, ul, li, form, img, input {
            padding: 0px;
            margin: 0px;
        }


        header {
            width: 980px; 
            background-color: #6C8DD5;
            margin-right: auto;
            margin-left: auto;
            font-family: "Helvetica Neue", Sentinal, sans-serif;
            padding-top: 7px;
            padding-bottom: 7px;
        }

        header nav {display: table;}
        header nav ul {display: table-row;} 
        header nav ul li {display: table-cell;}


        header nav ul img {
            width: 25px;
            height: 25px;
        }

HTML

<header role="banner">

    <nav role="navigation">
        <ul>
            <li id="logo">
                <a href="home.html"><img src="brand.jpg" /></a>
                <a href="home.html">MyBrand</a> 
            </li>

        </ul>
    </nav>

</header>

输出

enter image description here

Answer 1

DEMO

#logo a {
    display:inline-block;
    vertical-align:middle;
}

Answer 2

垂直并不像CSS那样简单，

你应该阅读这篇文章 http://css-tricks.com/what-is-vertical-align/ 这篇文章 http://css-tricks.com/centering-in-the-unknown/

Answer 3

添加下面给出的代码，img标记上的vertical-align:middle对于从图像底部删除边距也很重要。你可以使用填充来在它们之间提供spae

#logo a {
    display:table-cell;
    vertical-align:middle;
}
#logo a img {vertical-align:middle;}

Answer 4

垂直对齐CSS中的任何内容： http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

Answer 5

你应该看一下'line-height'

Answer 6

css add id：

#inner{ 
  position: absolute;   

  top: 18px;    
  left: 275px;  
  margin-left: -50px;   

}

和html

 <a href="home.html" id="inner">MyBrand</a>

无法垂直对齐

6 个答案: