我只想垂直对齐我的标题中的元素。这对于表格来说确实很简单，但不能指出如何使用CSS来完成。我想通过黑条垂直对齐所有3个元素：“徽标”，“搜索器”和文本输入。使用CSS垂直对齐元素

这里是CSS：

body { 
margin:0; 
padding:0; 
font-size:100%; 
} 

#header { 
background-color:#303030; 
height:3em; 
} 

#logo { 
color:#EEEEEE; 
font-size:2em; 
line-height:1.5em; 
padding:0 30px 0px 10px; 
display:inline; 
} 

#recherche { 
color:#EEEEEE; 
font-size:1.5em; 
display:inline; 
} 

#recherche input { 
width:300px; 
-webkit-border-radius: 4px; 
-moz-border-radius: 4px; 
border-radius:4px; 
}

和HTML：

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Test</title> 
    <link rel="stylesheet" type="text/css" href="css/mainframe.css"> 
</head> 
<body> 
    <div id="header"> 
    <div id="logo">Logo</div> 
    <form id="recherche" action="/" autocomplete="off"> 
    <label for="rechercher">Rechercher</label> 
    <input type="text" name="recherche"> 
</form> 
    </div> 
</body> 
</html>

来源

2013-07-02 user2542737

这是一种形式，而不是一个标签。 – user2542737

这里要说的是正常工作的解决方案：你可以添加line-height:size_px每一个元素，你想它的孩子是垂直对齐。（例如size_px：= 10px）。 line-height应该与父母身高相同（height）。

尝试：

jsfiddle.net/rjCBR/

来源

2013-07-02 13:32:16 vlio20

如果可能包含元素，这是一个糟糕的解决方案。 – cimmanon

更换body与下面的代码你的CSS的#header：

body { 
margin:0; 
padding:0; 
font-size:100%; 
width: 100%; 
display: table; 
} 

#header { 
background-color:#303030; 
height:3em; 
display: table-cell; 
vertical-align: middle; 
}

来源

2013-07-02 13:36:51

使用Vertical-align: middle;，因为其他建议，对齐底部每个元素的文本，这对于实际元素的底部基本上低于文本的输入框来说看起来很奇怪。

尝试添加下列属性输入CSS

height: 24px; 
vertical-align: text-bottom;

jsFiddle

来源

2013-07-02 13:47:56 KyleMit

谢谢你，这个工作。 – user2542737

请记住，为了获得最佳答案并将其标记为已接受最佳答案，不仅仅是在这里，而是在将来的讨论中，以促进最好的内容。 – KyleMit

使用CSS垂直对齐元素

回答

jsFiddle

相关问题