应用错误收集

无法将文本框与外部div对齐

时间：2013-03-24 20:47:39

标签： css dojo

演示：http://jsfiddle.net/57M68/。我已经尝试了很多东西，比如float，margin，padding但是我无法让文本框在黑色条带的中心垂直对齐。请帮忙。代码：

HTML：

<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
 <div id="top_bar">
 <div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
 <div class="logo">

 </div>
</a>
<div style="display:inline-block"> <input type="text" ></input></div>
</div>

</div>
 <div id="top_bar_divider"></div>
 <div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true" style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-left: auto; margin-right: auto;" design="headline">
   <div data-dojo-type="dijit.layout.ContentPane" extractContent="false" preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
  </div>
 </div>
</body>

JS：

require([
  "dijit/dijit",
  "dojo/parser",
  "maqetta/space",
  "maqetta/AppStates",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/form/TextBox"
]);

的CSS：

html,body {
    height: 100%;
    width: 100%;
}

 .logo_a{
background:url("icon1.png");
}
.logo{
width:60px;
height:50px;
display:inline-block;
}
.logo_a:active{
background-position:0 1px;
}

#top_bar{
    padding:0px; 
    background: -webkit-linear-gradient(#464646, #121212);
    background: -moz-linear-gradient(#464646, #121212);
    background: -ms-linear-gradient(#464646, #121212);
    background: -o-linear-gradient(#464646, #121212);
    background: linear-gradient(#464646, #121212);
    color: #ccc;
    text-shadow:none;
    height:50px;
    width:100%;
}
#top_bar_divider{
background-color:#1ba0e1;
height:4px;
width:100%;
}

2 个答案:

答案 0 :(得分：0)

您只需将vertical-align: middle添加到输入div和.logo_a：

.logo_a {
    background:url("icon1.png");
    vertical-align: middle;
}

http://jsfiddle.net/57M68/1/

答案 1 :(得分：0)

HTML就像这样

<body class="claro" data-maq-flow-layout="true" data-maq-comptype="desktop" data-maq-         ws="collapse" style="margin-top:0" data-maq-appstates="{}" id="myapp">
<div id="top_bar">
<div style="width: 900px; height:50px; margin-left: auto; margin-right: auto;">
<a href="/" class="logo logo_a">
<div class="logo">

</div>
</a>
<div id="text"> <input type="text"></div>
</div>

</div>
<div id="top_bar_divider"></div>
<div data-dojo-type="dijit.layout.BorderContainer" persist="false" gutters="true"   style="min-width: 1em; min-height: 1px; z-index: 0; width: 600px; height: 687px; margin-  left: auto; margin-right: auto;" design="headline">
<div data-dojo-type="dijit.layout.ContentPane" extractContent="false"   preventCache="false" preload="false" refreshOnShow="false" region="center" splitter="false" maxSize="Infinity">
</div>
</div>
</body>

将css添加到现有演示中 -

#text{display:inline;}
#text input{position:relative;
top:-43px;
left:110px;}