0

演示：http: //jsfiddle.net/57M68/。我已经尝试了很多东西，比如浮动、边距、填充，但我无法让文本框在黑条的中心垂直对齐。请帮忙。编码：

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%;
}
4

2 回答 2

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;}
于 2013-03-24T21:05:21.057 回答
0

您只需要添加vertical-align: middle到您的输入 div 并添加到.logo_a：

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

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

于 2013-03-24T20:56:12.587 回答